2c:null 2d:["$","title",null,{"children":"Text Annotation UI Component Using React and Draftjs | Alok Pepakayala | Observable"}] 32:T42d,md`- This is the basic demo showcasing the text annotation capability, you can extend using the callbacks and build a more complex annotation tool easily. - Further explore the components section to see how its setup: - Editor selection state: draftjs gives us selection offset, we dont have to worry about the html selection objects and their quirks - Entity maps: We always store text as plain text, and seperate the tags to a seperate data structure, which is more efficient if using csvs etc., and also we dont add xml style tags to thge main text which complicates the string offets as the text positions are no longer character count based. And draftjs entity maps allow us to use these offsets as-is. - Since we use Draftjs for editor, we can customize the text and labels as desired with custom React components - About the Demo: - Select some text in the below poem and add it as custom label too - Draftjs text selection works with keyboard too! - Explore the input, and callback data returned from the editor in the app state mutable values `33:T437,// Rich editor component with text annotation features RichEditor = (p) => { const [editorState, _editorState] = React.useState(() => p.content); const selection = get_selection(editorState); React.useEffect(() => { _editorState(p.content); }, [p.content]); React.useEffect(() => { p.selection_callback(selection); }, [selection]); const handle_keys = (e) => { if (e.key.match(/Arrow/)) { } else { return "not-handled-command"; } }; const editor_styles = { fontSize: "14px", lineHeight: "2.5em", marginBottom: "12px" }; const add_bar = selection.text && htm``; return htm`

<${Draft.Editor} editorState=${editorState} onChange=${_editorState} spellCheck="false" autoCorrect="off" keyBindingFn=${handle_keys}/>

${add_bar} `; }34:T40d,//React component to render a labeled text using span elements Labeled = (p) => { const data = p.contentState.getEntity(p.entityKey).getData(); var tag = data.tag; var color = data.color; return htm` ${p.children} ${tag} `; }35:[] 30:{"id":"134c117596d90d89","slug":"text-annotation-ui-component-using-react-and-draftjs","title":"Text Annotation UI Component Using React and Draftjs","thumbnail":"5e0666dc84c8ba0d1abb32ae638ccd9da980324aa09d422b11f097d0bf0bfbc0","access_level":"public","create_time":"$D2024-04-24T15:04:28.975Z","update_time":"$D2024-04-24T19:47:38.480Z","view_time":null,"first_public_time":"$D2024-04-24T16:43:48.495Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"ebdd8a722ae381e2","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/f28a7b5f4fb16a63caaace8a87a531e60bea383d6e9d50e126570c77c0814ba9","tier":"starter_2024"},"version":336,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e594cd7b50bd5352","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/a79accbaf1cb39d92bac556179588a03429b7ed84c64707b7ae8d86c9ffacfc7","tier":null}],"members":[{"type":"individual","id":"e594cd7b50bd5352","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/a79accbaf1cb39d92bac556179588a03429b7ed84c64707b7ae8d86c9ffacfc7","tier":null,"role":"editor"},{"type":"team","id":"ebdd8a722ae381e2","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/f28a7b5f4fb16a63caaace8a87a531e60bea383d6e9d50e126570c77c0814ba9","tier":"starter_2024","role":"editor"}],"comments":[{"id":"7fc8951d1173ea9e","reply_to_id":null,"content":"asdfasdf","create_time":"$D2024-10-15T22:40:48.685Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"f7693f716b24af2b","login":"alexander12","name":"Alexander","avatar_url":"https://avatars-next.observableusercontent.com/9a48d2cca6f674847fc2515daaa79721fd97f1e49d296e41468d14d367e2978f","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Text Annotation UI Component Using React and Draftjs","cells":[{"id":0,"value":"md`# Text Annotation UI Component Using React and Draftjs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":285,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":301,"value":"md`### Demo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"demo = {\n var dom = html`

`;\n var draftjs_content = create_draftjs_editor_content_from_json(sample_input);\n React.render(\n htm`<${RichEditor} content=${draftjs_content} \n selection_callback=${(e) => (mutable selection = e)}\n add_selection_to_input=${add_selection_to_input}/>`,\n dom\n );\n return html`

${dom}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"md`### Demo app state`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"mutable selection = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"mutable sample_input = ({\n text: \"Two roads diverged in a yellow wood,\\nAnd sorry I could not travel both\\nAnd be one traveler, long I stood\\nAnd looked down one as far as I could\\nTo where it bent in the undergrowth;\",\n substrings: [\n {\n text: \"roads \",\n start: 4,\n end: 10,\n label: \"Transport\",\n color: \"maroon\"\n },\n {\n text: \"travel \",\n start: 59,\n end: 66,\n label: \"Transport\",\n color: \"maroon\"\n },\n {\n text: \"traveler\",\n start: 82,\n end: 90,\n label: \"Transport\",\n color: \"maroon\"\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":221,"value":"add_selection_to_input = (select) => {\n console.log(select);\n select.label = \"Test\";\n select.color = \"tomato\";\n let input_copy = JSON.parse(JSON.stringify(sample_input));\n input_copy.substrings.push(select);\n mutable sample_input = input_copy;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"md`### Components`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"// get selectin as a simple json from the draftjs editor\nget_selection = (editor_state) => {\n var editorState = editor_state;\n var selectionState = editorState.getSelection();\n var anchorKey = selectionState.getAnchorKey();\n var currentContent = editorState.getCurrentContent();\n var currentContentBlock = currentContent.getBlockForKey(anchorKey);\n var start = selectionState.getStartOffset();\n var end = selectionState.getEndOffset();\n var selectedText = currentContentBlock.getText().slice(start, end);\n return {\n text: selectedText,\n start,\n end\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"create_draftjs_editor_content_from_json = (input_obj) => {\n var rawContent = {};\n var entityMap = {};\n input_obj.substrings.map((d) => {\n entityMap[d.label] = {\n type: \"tags\",\n data: {\n tag: d.label,\n color: d.color\n },\n mutability: \"MUTABLE\"\n };\n });\n\n rawContent.entityMap = entityMap;\n rawContent.blocks = [\n {\n text: input_obj.text,\n type: \"unstyled\",\n entityRanges: input_obj.substrings.map((d) => {\n return {\n offset: d.start,\n length: d.end - d.start,\n key: d.label\n };\n })\n }\n ];\n var block = Draft.convertFromRaw(rawContent);\n var content = Draft.EditorState.createWithContent(block, decorator);\n\n return content;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"decorator = {\n const findLabeledEntities = (contentBlock, callback, contentState) => {\n contentBlock.findEntityRanges((character) => {\n const entityKey = character.getEntity();\n return (\n entityKey !== null &&\n contentState.getEntity(entityKey).getType() === \"tags\"\n );\n }, callback);\n };\n\n return new Draft.CompositeDecorator([\n {\n strategy: findLabeledEntities,\n component: Labeled\n }\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"r = require.alias({\n htm: \"https://cdnjs.cloudflare.com/ajax/libs/htm/3.1.0/htm.umd.min.js\",\n preact: \"https://cdnjs.cloudflare.com/ajax/libs/preact/10.6.6/preact.umd.js\",\n \"preact/hooks\":\n \"https://cdnjs.cloudflare.com/ajax/libs/preact/10.6.6/hooks.umd.js\",\n react: \"https://unpkg.com/preact@10.6.6/compat/dist/compat.umd.js\",\n \"react-dom\": \"https://unpkg.com/preact@10.6.6/compat/dist/compat.umd.js\",\n\n \"draft-js\":\n \"https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.11.7/Draft.min.js\",\n immutable:\n \"https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.4/immutable.min.js\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"React = r(\"react\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"htm = r(\"htm\").then(d => d.bind(React.createElement));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"Draft = r(\"draft-js\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 31:"$30:body"