Layout

lib/index.ts

@@ -5,32 +5,97 @@ import {markdown} from '@codemirror/lang-markdown';
 import {syntaxHighlighting} from '@codemirror/language';
 import markdownHighlight from './highlight/markdown';
 
+import {h, patch} from 'superfine';
+
 type Options = {
   value: string | undefined;
+  toolbarClass?: string;
+  previewClass?: string;
+  editorContainerClass?: string;
+  photonEditorClass?: string;
+};
+
+type LayoutInterface = {
+  create(): void;
+  getEditorContainer(): HTMLElement | undefined;
 };
 
+class DefaultLayout implements LayoutInterface {
+  private vdomRoot: HTMLElement | undefined;
+  private editorContainer: HTMLElement | undefined;
+
+  constructor(private readonly parentElement: HTMLElement) {
+    this.parentElement = parentElement;
+  }
+
+  create() {
+    this.render();
+  }
+
+  getEditorContainer() {
+    return this.editorContainer;
+  }
+
+  private render() {
+    const toolbarVdom = h('div', {class: 'toolbar'}, [
+      // ここにツールバーのコンテンツを追加
+    ]);
+
+    const previewVdom = h('div', {class: 'preview'}, [
+      // ここにMarkdownのHTML変換結果を追加
+    ]);
+
+    const editorContainerVdom = h('div', {class: 'editor-container'});
+
+    const rootVdom = h('div', {class: 'photon-editor'}, [
+      toolbarVdom,
+      editorContainerVdom,
+      previewVdom,
+    ]);
+
+    if (this.vdomRoot) {
+      patch(this.vdomRoot, rootVdom);
+    } else {
+      this.vdomRoot = document.createElement('div');
+      this.parentElement.appendChild(this.vdomRoot);
+      patch(this.vdomRoot, rootVdom);
+    }
+
+    const editorContainer = this.vdomRoot.querySelector('.editor-container');
+    if (editorContainer !== null) {
+      this.editorContainer = editorContainer as HTMLElement;
+    }
+  }
+}
+
 class PhotonEditor {
   private editor: EditorView | undefined;
+  private readonly layout: LayoutInterface;
 
   constructor(
     private readonly element: HTMLElement,
     private readonly options: Options,
+    layout: LayoutInterface,
   ) {
     this.element = element;
     this.options = options;
+    this.layout = layout || new DefaultLayout(this.element);
   }
 
   createEditor() {
-    this.editor = new EditorView({
-      state: EditorState.create({
-        doc: this.options.value,
-        extensions: [
-          markdown(),
-          keymap.of(defaultKeymap),
-          syntaxHighlighting(markdownHighlight),
-        ],
-      }),
-      parent: this.element,
+    this.layout.create();
+    this.waitForContainerReady(editorContainer => {
+      this.editor = new EditorView({
+        state: EditorState.create({
+          doc: this.options.value,
+          extensions: [
+            markdown(),
+            keymap.of(defaultKeymap),
+            syntaxHighlighting(markdownHighlight),
+          ],
+        }),
+        parent: editorContainer,
+      });
     });
   }
 
@@ -47,6 +112,23 @@ class PhotonEditor {
       },
     });
   }
+
+  private waitForContainerReady(callback: (element: HTMLElement) => void) {
+    const observer = new MutationObserver(() => {
+      const editorContainer = this.layout.getEditorContainer();
+
+      if (editorContainer) {
+        observer.disconnect();
+        callback(editorContainer);
+      }
+    });
+
+    // Observer構成オブジェクト
+    const config = {childList: true, subtree: true};
+
+    // 対象の要素とその子孫を監視を開始
+    observer.observe(this.element, config);
+  }
 }
 
 export default PhotonEditor;

package.json

@@ -29,6 +29,7 @@
     "@codemirror/language-data": "^6.2.0",
     "@codemirror/state": "^6.2.0",
     "@codemirror/view": "^6.9.4",
+    "@types/superfine": "^7.0.2",
     "@typescript-eslint/eslint-plugin": ">=5.57.0",
     "@typescript-eslint/parser": ">=5.57.0",
     "eslint": "^8.38.0",
@@ -42,6 +43,7 @@
   },
   "dependencies": {
     "@codemirror/language": "^6.6.0",
-    "@lezer/highlight": "^1.1.4"
+    "@lezer/highlight": "^1.1.4",
+    "superfine": "^8.2.0"
   }
 }