@things-factory/reference-app 6.0.15 → 6.0.18

package/client/components/editor-lexical.tsx

@@ -1,6 +1,26 @@
-import { ReactContainer } from './react-container'
-// import Editor from 'lexical-playground'
+// import { ReactContainer } from './react-container'
+// // import Editor from 'lexical-playground'
 
-export default function LexicalEditor() {
-  return <ReactContainer>{/* <Editor></Editor> */}</ReactContainer>
+// export default function LexicalEditor() {
+//   return <ReactContainer>{/* <Editor></Editor> */}</ReactContainer>
+// }
+import { LexicalComposer } from '@lexical/react/LexicalComposer'
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
+import { ContentEditable } from '@lexical/react/LexicalContentEditable'
+import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary'
+
+type LexicalEditorProps = {
+  config: Parameters<typeof LexicalComposer>['0']['initialConfig']
+}
+
+export function LexicalEditor(props: LexicalEditorProps) {
+  return (
+    <LexicalComposer initialConfig={props.config}>
+      <RichTextPlugin
+        contentEditable={<ContentEditable />}
+        placeholder={<div>Start writing...</div>}
+        ErrorBoundary={LexicalErrorBoundary}
+      />
+    </LexicalComposer>
+  )
 }

package/client/pages/web-editor-lexical-page.js

@@ -4,7 +4,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 // import { EditorLexical } from '../components/editor-lexical'
-import LexicalEditor from '../components/editor-lexical'
+import { LexicalEditor } from '../components/editor-lexical'
 
 import { PageView, store } from '@things-factory/shell'
 
@@ -19,6 +19,29 @@ class WebEditorLexicalPage extends connect(store)(PageView) {
         :host > * {
           flex: 1;
         }
+
+        .ltr {
+          text-align: left;
+        }
+
+        .rtl {
+          text-align: right;
+        }
+
+        .editor-placeholder {
+          color: #999;
+          overflow: hidden;
+          position: absolute;
+          top: 15px;
+          left: 15px;
+          user-select: none;
+          pointer-events: none;
+        }
+
+        .editor-paragraph {
+          margin: 0 0 15px 0;
+          position: relative;
+        }
       `
     ]
   }
@@ -40,7 +63,85 @@ class WebEditorLexicalPage extends connect(store)(PageView) {
   }
 
   firstUpdated() {
-    ReactDOM.createRoot(this.renderRoot).render(React.createElement(LexicalEditor, {}))
+    ReactDOM.createRoot(this.renderRoot).render(
+      React.createElement(LexicalEditor, {
+        config: {
+          namespace: 'MyEditor',
+          theme: {
+            ltr: 'ltr',
+            rtl: 'rtl',
+            placeholder: 'editor-placeholder',
+            paragraph: 'editor-paragraph',
+            quote: 'editor-quote',
+            heading: {
+              h1: 'editor-heading-h1',
+              h2: 'editor-heading-h2',
+              h3: 'editor-heading-h3',
+              h4: 'editor-heading-h4',
+              h5: 'editor-heading-h5',
+              h6: 'editor-heading-h6'
+            },
+            list: {
+              nested: {
+                listitem: 'editor-nested-listitem'
+              },
+              ol: 'editor-list-ol',
+              ul: 'editor-list-ul',
+              listitem: 'editor-listItem',
+              listitemChecked: 'editor-listItemChecked',
+              listitemUnchecked: 'editor-listItemUnchecked'
+            },
+            hashtag: 'editor-hashtag',
+            image: 'editor-image',
+            link: 'editor-link',
+            text: {
+              bold: 'editor-textBold',
+              code: 'editor-textCode',
+              italic: 'editor-textItalic',
+              strikethrough: 'editor-textStrikethrough',
+              subscript: 'editor-textSubscript',
+              superscript: 'editor-textSuperscript',
+              underline: 'editor-textUnderline',
+              underlineStrikethrough: 'editor-textUnderlineStrikethrough'
+            },
+            code: 'editor-code',
+            codeHighlight: {
+              atrule: 'editor-tokenAttr',
+              attr: 'editor-tokenAttr',
+              boolean: 'editor-tokenProperty',
+              builtin: 'editor-tokenSelector',
+              cdata: 'editor-tokenComment',
+              char: 'editor-tokenSelector',
+              class: 'editor-tokenFunction',
+              'class-name': 'editor-tokenFunction',
+              comment: 'editor-tokenComment',
+              constant: 'editor-tokenProperty',
+              deleted: 'editor-tokenProperty',
+              doctype: 'editor-tokenComment',
+              entity: 'editor-tokenOperator',
+              function: 'editor-tokenFunction',
+              important: 'editor-tokenVariable',
+              inserted: 'editor-tokenSelector',
+              keyword: 'editor-tokenAttr',
+              namespace: 'editor-tokenVariable',
+              number: 'editor-tokenProperty',
+              operator: 'editor-tokenOperator',
+              prolog: 'editor-tokenComment',
+              property: 'editor-tokenProperty',
+              punctuation: 'editor-tokenPunctuation',
+              regex: 'editor-tokenVariable',
+              selector: 'editor-tokenSelector',
+              string: 'editor-tokenSelector',
+              symbol: 'editor-tokenProperty',
+              tag: 'editor-tokenProperty',
+              url: 'editor-tokenOperator',
+              variable: 'editor-tokenVariable'
+            }
+          },
+          onError: console.error
+        }
+      })
+    )
   }
 
   stateChanged(state) {}