Hi all!
*1. Question*
1. Would it be possible to have a better abstraction in the custom markup?
So that we could separate the logical layer from the application, the
interface/interaction layer from the data layer?
- An example of the application logic layer: includes keywords like
'if', 'else', 'for', 'while', 'true', 'false', 'ListView etc'
- An example of the interface/interaction layer: include keywords like
'!!! to h3' or 'h3' or '#### h3' etc
- An example each data layer: includes only plain text
*2. An example for each usage here*
*1. application logic layer: *
```json
{
"time" : 1659600652950,
"blocks" : [
{
"id" : "QG7d-eoSuo",
"type" : "header",
"data" : {
"text" : "Editor.js",
"level" : 2
}
},
{
"id" : "kVwdXj215H",
"type" : "paragraph",
"data" : {
"text" : "Hey. Meet the new Editor. On this page you can
see it in action — try to edit this text."
}
},
{
"id" : "H-e1YiUKlN",
"type" : "header",
"data" : {
"text" : "Key features",
"level" : 3
}
},
{
"id" : "T3ln9Hapf5",
"type" : "list",
"data" : {
"style" : "unordered",
"items" : [
"It is a block-styled editor",
"It returns clean data output in JSON",
"Designed to be extendable and pluggable with a simple
API"
]
}
},
{
"id" : "KREAmAR5pB",
"type" : "header",
"data" : {
"text" : "What does it mean «block-styled editor»",
"level" : 3
}
},
{
"id" : "YOC9ONSAyk",
"type" : "paragraph",
"data" : {
"text" : "Workspace in classic editors is made of a single
contenteditable element, used to create different HTML markups. Editor.js
<mark class=\"cdx-marker\">workspace consists of separate Blocks:
paragraphs, headings, images, lists, quotes, etc</mark>. Each of them is an
independent contenteditable element (or more complex structure) provided by
Plugin and united by Editor's Core."
}
},
{
"id" : "1vu_B7xnOz",
"type" : "paragraph",
"data" : {
"text" : "There are dozens of <a
href=\"https://github.com/editor-js\";>ready-to-use Blocks</a> and the <a
href=\"https://editorjs.io/creating-a-block-tool\";>simple API</a> for
creation any Block you need. For example, you can implement Blocks for
Tweets, Instagram posts, surveys and polls, CTA-buttons and even games."
}
},
{
"id" : "QnnsDw4lDQ",
"type" : "header",
"data" : {
"text" : "What does it mean clean data output",
"level" : 3
}
},
{
"id" : "Bz-zR4AT9U",
"type" : "paragraph",
"data" : {
"text" : "Classic WYSIWYG-editors produce raw HTML-markup
with both content data and content appearance. On the contrary, Editor.js
outputs JSON object with data of each Block. You can see an example below"
}
},
{
"id" : "rnI2GILJ4v",
"type" : "paragraph",
"data" : {
"text" : "Given data can be used as you want: render with
HTML for <code class=\"inline-code\">Web clients</code>, render natively
for <code class=\"inline-code\">mobile apps</code>, create markup for <code
class=\"inline-code\">Facebook Instant Articles</code> or <code
class=\"inline-code\">Google AMP</code>, generate an <code
class=\"inline-code\">audio version</code> and so on."
}
},
{
"id" : "VXEb5d5CLm",
"type" : "paragraph",
"data" : {
"text" : "Clean data is useful to sanitize, validate and
process on the backend."
}
},
{
"id" : "u6VJxBO9HW",
"type" : "delimiter",
"data" : {}
},
{
"id" : "MpYqDoF6XM",
"type" : "paragraph",
"data" : {
"text" : "We have been working on this project more than
three years. Several large media projects help us to test and debug the
Editor, to make it's core more stable. At the same time we significantly
improved the API. Now, it can be used to create any plugin for any task.
Hope you enjoy. 😏"
}
},
{
"id" : "ygqt5IYr9S",
"type" : "image",
"data" : {
"file" : {
"url" :
"https://codex.so/public/app/img/external/codex2x.png";
},
"caption" : "",
"withBorder" : false,
"stretched" : false,
"withBackground" : false
}
}
],
"version" : "2.24.3"
}
```
or
*2. interface/interaction layer: *
```json
{ // UISchema
"firstName": {
"ui:autofocus": true,
"ui:emptyValue": "",
"ui:autocomplete": "family-name"
},
"lastName": {
"ui:emptyValue": "",
"ui:autocomplete": "given-name"
},
"age": {
"ui:widget": "updown",
"ui:title": "Age of person",
"ui:description": "(earthian year)"
},
"bio": {
"ui:widget": "textarea"
},
"password": {
"ui:widget": "password",
"ui:help": "Hint: Make it strong!"
},
"date": {
"ui:widget": "alt-datetime"
},
"telephone": {
"ui:options": {
"inputType": "tel"
}
}
}
```
or
*3. data layer:*
```json
{ // JSONSchema, data layer
"title": "A registration form",
"description": "A simple form example.",
"type": "object",
"required": [
"firstName",
"lastName"
],
"properties": {
"firstName": {
"type": "string",
"title": "First name",
"default": "Chuck"
},
"lastName": {
"type": "string",
"title": "Last name"
},
"telephone": {
"type": "string",
"title": "Telephone",
"minLength": 10
}
}
}
```
*3. References*
1. https://github.com/rjsf-team/react-jsonschema-form
2. https://github.com/Jermolene/TiddlyWiki5/discussions
3. https://wikilabs.github.io/
4. https://editorjs.io/getting-started
On Wednesday, September 16, 2020 at 7:52:12 AM UTC-3 PMario wrote:
> On Wednesday, September 16, 2020 at 12:35:29 PM UTC+2, TonyM wrote:
>>
>> Marion,
>>
>
> I'm from Mars ♂️ ;)
>
> Clean up notes;
>>
>>>
>>> - I love the - All button, cool. Refresh or reverse using these
>>> tools1
>>>
>>> I don't understand the above sentence.
>>>
>>
>> The All button allows remove all ID's including attached classes etc..
>> this is;
>>
>> - Cool
>> - Useful
>> - Great
>>
>>
> Ah .. .OK. Yea I didn't want to have so many "minus" buttons. So I decided
> to go with one.
>
> But I need to make the "toggle" button image adjustable. May be I can add
> a tooltip with the current setting to get better feedback.
>
> We should continue discussion at: Custom markup (continued 2)
> <https://groups.google.com/forum/#!topic/tiddlywikidev/sCMOjYxMk2Q>
> -m
>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywikidev/e6b7e54c-4078-454c-a006-c347305dda43n%40googlegroups.com.
![https://codex.so/public/app/img/external/codex2x.png"](https://codex.so/public/app/img/external/codex2x.png"){kind=link}