Checkbox list

[morenoh149]

Hello, I'd like to build a todo list with something like this wysiwyg rich text editor.

Could you provide pointers on where to add this? Or if this would even be a welcome PR?

Also when we add support for checkbox lists how might one get an id for this list item? I need to associate task details to this list item as well.

[ohpax]

I was thinking about this last week, and that is a welcomed PR for sure but we should make sure that we implement it in a way to get correct events from the checkboxes. I will talk with @imnapo on our video meeting to see what we can come up with.

[morenoh149]

I was reading the source and it seems like you are taking inspiration from html with the current ol and ul tags. To continue that thread we may add the input tag along with support for the type=checkbox attribute.

As for how to identify it uniquely, maybe some callback that runs on every keystroke or when flushing to an HTMLString where users can define arbitrary logic. In my case I'd want to parse every input and decorate each with a uuid if it doesn't already have one.

[imnapo]

Hello @morenoh149 , we've also thought about adding check list to this package lately, and we've decided to work on it maybe later when we are not busy. But If you can start working on it, I would say go ahead and make PR for that. it's absolutely a welcomed PR. And you're right we take inspiration of html. This editor works with a JavaScript array that is so similar to html tags (with more limitations) and each item has its own unique id (provided with shortid package).

[morenoh149]

oh each item as it's own unique id? what line is that in the code?

[imnapo]

the editor keeps value in javascript array like below:

Array [
  Object {
    "id": "LPRCtABHS",
    "component": "text",
    "content": Array [
      Object {
        "id": "LimQlnkgh",
        "styleList": Object {
          "fontSize": 20,
          "fontStyle": "italic",
          "fontWeight": "bold",
        },
        "tag": "body",
        "text": "Sample text",
      },
    ]
  },
  Object {
    "component": "image",
    "id": "uihfsONnb",
    "size": Object {
      "height": 1206,
      "width": 1242,
    },
    "url": "....",
  },
Object {
    "component": "text",
    "content": Array [
      Object {
        "id": "q8HVGU21Bu",
        "styleList": Array [
          Object {
            "fontSize": 20,
          },
        ],
        "tag": "body",
        "text": "Rest of text",
      },
    ],
    "id": "iQYWmZp8Nu",
  }
]

this is the equivalent html string :

<div>
<p><span style="font-weight: bold;font-style: italic;">Sample text </span></p>
<img src="file:///1.jpg" width="1242" height="1206"/>
<p><span>rest of text</span></p>
</div>

we pass each id to relevant components as key prop but you may also use it as desired ( check CNTextInput render method line : 1494 ).

[morenoh149]

oh and that id seems to be made by https://github.com/dylang/shortid on https://github.com/imnapo/react-native-cn-richtext-editor/blob/master/src/CNTextInput.js#L138

I'll read up on this lib.

Do you know if these tag ids are unchanging (stable) across edits? Is it ok to use these ids in the database to associate extra data with that tag?

[imnapo]

We're not saving them during convert to html string right now but it is completely valid to keep them. There is 2 convert functions here to convert the javascript array to html string and vice versa. we should just modify this functions to keep existing ids.

[morenoh149]

or add it as an option to keep the ids. Thanks for the convo 👍