Skip to content

GitLab

Closed
Created by Christos@christosDeveloper

New Editoria Typescript With notes

In this example in the main text there are two notes (the callouts).

<note data-id="note-d8d5c4dfdfb0a1d448d2e52f4fac6299"></note>

<note data-id="note-d24ccd7aa83507285dbdf8c3b2467b8f"></note>

When a note is created, Wax will create a new editing surface for it, which is an extension of the container and we named it note-container. The important thing in the implementation of notes, is that somehow Wax must know which editing surface belongs to each note. In the previous implementation, there was a note-content property where the content of the note was extracted from. Now this is done by matching the callout and the editing surface in the following way.

Each note callout has a data-id property. During the creation of the editing surface Wax will get this property and will add the prefix of container-. This constructed tag will then be added as an id in the <note-container> tag.

So when you detect a note you create a callout as before with a data id property. For example (it could be incremental note-1, note-2) depending on your implementation or randomly generated <note data-id='note-1'></note>. Inside the HTML body tag, and right after where id="main" ends, for each note you should create an associated note-container with id the data-id of the callout with container as a prefix as explained above. Inside you add the html for the note in <p> tags. So if we have two callouts <note data-id='note-1'></note> and <note data-id='note-2'></note> We create 2 note containers

<note-container id="container-note-1"></note-container>

<note-container id="container-note-2"></note-container>

Also in the example below the note-containers are grouped in a <div id="notes">. this div tag is not necessary although it will be a nice to have in order to provide an organised HTML output.

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta charset="UTF-8"/>
</head>

 <body>

  <container id="main">
    <h1> test </h1>
    <p> some <note data-id="note-d8d5c4dfdfb0a1d448d2e52f4fac6299"></note> 
  text <note data-id="note-d24ccd7aa83507285dbdf8c3b2467b8f"></note> </p>
  </container>

   div id="notes">
     <note-container id="container-note-d8d5c4dfdfb0a1d448d2e52f4fac6299">
        <p>note content par. 1</p>
        <p>note content par 2</p>
        <p>note content par 3</p>
     </note-container>

     <note-container id="container-note-d24ccd7aa83507285dbdf8c3b2467b8f">
        <p>note content par. 1</p>
        <p>note content par 2</p>
        <p>note content par 3</p>
     </note-container>
   </div>

 </body>
</html>