Page Content Types

[severus-sn4pe]

Generate page content as array of content element blocks.

[severus-sn4pe]

I have currently implemented the parsing in workbench-ui for the following types:

{
  "types": [
    {
      "type": "h1",
      "content": ""
    },
    {
      "type": "h2",
      "content": ""
    },
    {
      "type": "h3",
      "content": ""
    },
    {
      "type": "h4",
      "content": ""
    },
    {
      "type": "h5",
      "content": ""
    },
    {
      "type": "h6",
      "content": ""
    },
    {
      "type": "p",
      "content": ""
    },
    {
      "type": "a",
      "content": {
        "url": "",
        "text": ""
      }
    },
    {
      "type": "exercise",
      "content": {
        "description": "",
        "initial": "",
        "solution": "",
        "validation": ""
      }
    },
    {
      "type": "code",
      "content": {
        "language": "",
        "code": ""
      }
    },
    {
      "type": "quote",
      "content": ""
    },
    {
      "type": "html",
      "content": ""
    },
    {
      "type": "youtube",
      "content": {
        "title": "",
        "id": ""
      }
    }
  ]
}

[thibmeu]

JSON = [ ELEMENT* ]
ELEMENT = HEADER | PARAGRAPH | BLOCK | HTML | CUSTOM
CUSTOM = YOUTUBE | EXERCISE

HEADER = { type: HEADER_CODE, content: TEXT | LINK }
HEADER_CODE = h1 | h2 | h3 | h4 | h5 | h6

LINK = { type: link, content: [ TEXT  ], href: TEXT }

PARAGRAPH = { type: p, content: [ ELEMENT ] }
MARKDOWN = TEXT # default markdown syntax -> https://daringfireball.net/projects/markdown/syntax

BLOCK = { type: codeblock, content: [{ type: SUPPORTED_LANGUAGE, content: TEXT }] }
SUPPORTED_LANGUAGE = javascript | solidity | html | python | c | text

HTML = { type: html, content: TEXT }

YOUTUBE = { type: youtube, content: { href: HREF } }

EXERCISE = { type: exercise, content: { description: [ ELEMENT ], initial: SOLIDITY, solution: SOLIDITY, hints: PARAGRAPH, validation: { abi: TEXT, address: ETHEREUM_ADDRESS } } }
SOLIDITY = TEXT
ETHEREUM_ADDRESS = 0x + CHAR{40}

HREF = http(s)?://TEXT.TEXT + TEXT*
TEXT = CHAR*
CHAR = one character

[severus-sn4pe]

Currently, I used a Markdown Component, for displaying contents of a paragraph. This simplifies the rendering of formatted paragraphs, as this can already display b,i,u,pre and inline links. So atm

{
  "type": "p",
  "content": "**Tips: **__Never__ *give* the [compiler](https://www.google.com) a `bool`."
}

already shows as: Tips: Never give the compiler a bool.
(underline does not display correctly on github).

So that would also simplify the requirements for the syntax parsing, but the downside is that we cannot control in detail how the content is displayed and just rely on the implementation of the Markdown-Component (demo). So for more control over the output, your approach is better. Just wanted to mention this.

[severus-sn4pe]

If we do it as described in your schema the sentence of the previous comment will be represented by this JS Object:

{
  "type": "p",
  "content": [
    {"type": "b", "content": "Tips: "},
    {"type": "u", "content": "Never "},
    {"type": "i", "content": "give "},
    {"type": "text", "content": "the "},
    {"type": "a", "content": { "href" : "https://www.google.com", "text" : "compiler " }},
    {"type": "text", "content": "a "},
    {"type": "pre", "content": "bool "}
    {"type": "text", "content": "."},
  ]
}

So the content of paragraph has to be an array PARAGRAPH = { type: p, content: [RICH_TEXT* | LINK* ] } and we need an additional RICH_TEXT_CODE for normal text. (In my example I just used 'text'). This would then probably result in a <span> tag.

[severus-sn4pe]

for formatting code blocks it would be nice to specify a language. so instead of using a paragraph as content of code, it could be like content: {language: SUPPORTED_LANGUAGE, code: TEXT} and SUPPORTED_LANGUAGE = solidity | javascript | ...

I don't thin it's necessary to support RICH_TEXT inside code blocks.

what do you think?

[thibmeu]

If the client has markdown redability then definitly we can simplify the syntax. Please have a look at my previous comment, I have updated it accordingly.

[thibmeu]

Is your markdown parser able to parse the following?

` ``<language>
...
` ``

[severus-sn4pe]

I added js-Type on the workbench-ui like this:

ELEMENT = HEADER | PARAGRAPH | BLOCK | HTML | JS | CUSTOM JS = { type: js, content: TEXT }