⚙️ docs - add devkit with codemirror

packages/devkit/.eslintrc.cjs

@@ -0,0 +1,10 @@
+module.exports = {
+  parserOptions: {
+    ecmaVersion: 6,
+    sourceType: "module",
+    project: __dirname + '/tsconfig.json'
+  },
+  extends: [
+    '../../.eslintrc.cjs',
+  ],
+};

packages/devkit/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@edybara/devkit",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "tsup --watch --tsconfig tsconfig.build.json",
+    "clean:dist": "rimraf dist",
+    "clean:dependency": "rimraf node_modules",
+    "build": "npm run clean:dist && npm run build:ts && npm run build:style",
+    "build:ts": "tsup --tsconfig tsconfig.build.json",
+    "build:style": "sass styles:styles"
+  },
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "style": "styles/devkit.scss",
+  "types": "dist/index.d.ts",
+  "private": true,
+  "dependencies": {
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/state": "^6.4.1",
+    "@edybara/ui": "*",
+    "codemirror": "^6.0.1",
+    "preact": "^10.20.1",
+    "prosemirror-commands": "*",
+    "prosemirror-dropcursor": "*",
+    "prosemirror-gapcursor": "*",
+    "prosemirror-history": "*",
+    "prosemirror-inputrules": "*",
+    "prosemirror-keymap": "*",
+    "prosemirror-model": "*",
+    "prosemirror-state": "*",
+    "prosemirror-transform": "*",
+    "prosemirror-utils": "*",
+    "prosemirror-view": "*"
+  },
+  "devDependencies": {
+    "rimraf": "^5.0.5",
+    "sass": "^1.69.5",
+    "tsup": "^8.0.1",
+    "typescript": "^5.2.2"
+  }
+}

packages/devkit/src/components/codemirror/codemirror.scss

@@ -0,0 +1,11 @@
+.edybara-devkit-codemirror-container {
+  width: 100%;
+  margin-top: 12px;
+}
+
+.edybara-devkit-codemirror-wrapper {
+  border-radius: 3px;
+  border: 1px solid #bdbdbd;
+  height: 500px;
+  overflow-y: auto;
+}

packages/devkit/src/components/codemirror/codemirror.ts

@@ -0,0 +1,109 @@
+import { Plugin as PMPlugin, PluginKey } from 'prosemirror-state';
+import { EditorState } from '@codemirror/state';
+import { EditorView, basicSetup } from 'codemirror';
+import { json } from '@codemirror/lang-json';
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'preact/compat';
+import { html } from '@edybara/ui';
+import { render } from 'preact';
+
+export interface CodeMirrorProps {
+  className?: string;
+  values?: string;
+  onStateChange?: (doc: any) => void;
+}
+
+export interface CodeMirrorRef {
+  view: EditorView | null;
+}
+
+export const CodeMirror = forwardRef<CodeMirrorRef, CodeMirrorProps>(
+  (props, ref) => {
+    const wrapper = useRef<HTMLDivElement>(null);
+    const [editorViewRef, setEditorViewRef] = useState<EditorView | null>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        view: editorViewRef,
+      }),
+      [editorViewRef],
+    );
+
+    useEffect(() => {
+      const view = new EditorView({
+        extensions: [basicSetup, json(), EditorState.readOnly.of(true)],
+        parent: wrapper.current!,
+        doc: props.values || '',
+      });
+      setEditorViewRef(view);
+      return () => {
+        view.destroy();
+      };
+    }, []);
+
+    useEffect(() => {
+      if (!editorViewRef) {
+        return;
+      }
+      editorViewRef.dispatch({
+        changes: {
+          from: 0,
+          to: editorViewRef.state.doc.length,
+          insert: props.values || '',
+        },
+      });
+    }, [props.values]);
+
+    return html`<div
+      className="edybara-devkit-codemirror-wrapper"
+      ref=${wrapper}
+    ></div> `;
+  },
+);
+
+export const edybaraDevkitCodeMirrorPlugins = (): PMPlugin[] => {
+  const plugin = new PMPlugin({
+    key: new PluginKey('edybaraDevkitToolbar'),
+    view: (editorView) => {
+      let root = editorView.dom.parentElement!;
+
+      while (root.className !== 'edybara-root') {
+        if (!root) {
+          return {};
+        }
+        if (root.classList.contains('edybara-root')) {
+          break;
+        }
+        root = root.parentElement!;
+      }
+
+      if (!root) {
+        return {};
+      }
+
+      const wrapper = document.createElement('div');
+      wrapper.classList.add('edybara-devkit-codemirror-container');
+      root.appendChild(wrapper);
+
+      const renderToolbar = (values: string) =>
+        render(
+          html`<${CodeMirror} editorView=${editorView} values=${values} />`,
+          wrapper,
+        );
+
+      renderToolbar(JSON.stringify(editorView.state.doc.toJSON(), null, 2));
+      return {
+        update: (view) =>
+          renderToolbar(JSON.stringify(view.state.doc.toJSON(), null, 2)),
+        destroy: () => render(null, wrapper),
+      };
+    },
+  });
+  return [plugin];
+};

packages/devkit/src/components/codemirror/index.ts

@@ -0,0 +1 @@
+export * from './codemirror';

packages/devkit/src/components/index.ts

@@ -0,0 +1 @@
+export * from './codemirror';

packages/devkit/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

packages/devkit/styles/devkit.scss

@@ -0,0 +1 @@
+@import '../src/components/codemirror/codemirror.scss';

packages/devkit/tsconfig.build.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "skipLibCheck": true,
+    "paths": {}
+  },
+}

packages/devkit/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "outDir": "./dist",
+    "declaration": true,
+    "paths": {
+      "@edybara/core": ["../../core/src/index.ts"],
+      "@edybara/ui": ["../../ui/src/index.ts"],
+    }
+  },
+  "include": [
+    "src/*"
+  ],
+  "files": [
+    "src/index.ts"
+  ]
+}

packages/devkit/tsup.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  target: 'es2018',
+  entry: [
+    'src/index.ts',
+  ],
+  format: ['esm', 'cjs'],
+  dts: true,
+  splitting: false,
+  sourcemap: false,
+  clean: true,
+});

packages/docs/package.json

@@ -25,6 +25,7 @@
     "@edybara/codeblock": "*",
     "@edybara/command": "*",
     "@edybara/core": "*",
+    "@edybara/devkit": "*",
     "@edybara/emoji": "*",
     "@edybara/flat-list": "*",
     "@edybara/flat-task-list": "*",

packages/docs/src/components/examples/packages/core.tsx

@@ -2,56 +2,40 @@ import {
   ProseMirror,
   ProseMirrorProps,
 } from '@site/src/components/editor/prose-mirror';
-import { EditorState, Plugin } from 'prosemirror-state';
-import React, { useState } from 'react';
+import { EditorState } from 'prosemirror-state';
+import React, { useRef, useState } from 'react';
 import { Schema } from 'prosemirror-model';
-import {
-  edybaraBaseNodes,
-  edybaraCorePlugins,
-  edybaraBasicKeymapPlugins,
-  edybaraDropCursorPlugins,
-  edybaraGapCursorPlugins,
-  edybaraHistoryPlugins,
-  edybaraVirtualCursorPlugins,
-} from '@edybara/core';
+import { edybaraBaseNodes, edybaraCorePlugins } from '@edybara/core';
 import {
   edybaraParagraphNodes,
   edybaraParagraphPlugins,
 } from '@edybara/paragraph';
+import { edybaraDevkitCodeMirrorPlugins } from '@edybara/devkit';
 
-const schema = new Schema({
-  nodes: {
-    ...edybaraBaseNodes(),
-    ...edybaraParagraphNodes(),
-  },
-});
+export const CoreExample = (props: ProseMirrorProps) => {
+  const schema = useRef(
+    new Schema({
+      nodes: {
+        ...edybaraBaseNodes(),
+        ...edybaraParagraphNodes(),
+      },
+    }),
+  );
 
-const plugins: Plugin[] = [
-  ...edybaraParagraphPlugins({
-    nodeType: schema.nodes['paragraph'],
-  }),
-  ...edybaraCorePlugins(),
-  // ...edybaraBasicKeymapPlugins(),
-  // ...edybaraHistoryPlugins(),
-  // ...edybaraVirtualCursorPlugins(),
-  // ...edybaraDropCursorPlugins(),
-  // ...edybaraGapCursorPlugins(),
-];
+  const plugins = useRef([
+    ...edybaraParagraphPlugins({
+      nodeType: schema.current.nodes['paragraph'],
+    }),
+    ...edybaraCorePlugins(),
+    ...edybaraDevkitCodeMirrorPlugins(),
+  ]);
 
-export const CoreExample = (props: ProseMirrorProps) => {
   const [state] = useState(
     EditorState.create({
-      schema: schema,
-      plugins: plugins,
+      schema: schema.current,
+      plugins: plugins.current,
     }),
   );
 
-  return (
-    <ProseMirror
-      state={state}
-      style={{ height: '300px' }}
-      className="border"
-      {...props}
-    />
-  );
+  return <ProseMirror state={state} {...props} />;
 };

packages/docs/src/components/examples/packages/preset.tsx

@@ -3,22 +3,26 @@ import {
   ProseMirrorProps,
 } from '@site/src/components/editor/prose-mirror';
 import { EditorState } from 'prosemirror-state';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { edybaraPresetSchema, edybaraPresetPlugins } from '@edybara/preset';
 import doc from '@site/src/pages/lorem-ipsum.json';
 import { Node } from 'prosemirror-model';
-
-const schema = edybaraPresetSchema();
-const plugins = edybaraPresetPlugins({
-  schema,
-});
+import { edybaraDevkitCodeMirrorPlugins } from '@edybara/devkit';
 
 export const PresetExample = (props: ProseMirrorProps) => {
+  const schema = useRef(edybaraPresetSchema());
+  const plugins = useRef([
+    ...edybaraPresetPlugins({
+      schema: schema.current,
+    }),
+    ...edybaraDevkitCodeMirrorPlugins(),
+  ]);
+
   const [state] = useState(
     EditorState.create({
-      doc: Node.fromJSON(schema, doc),
-      schema: schema,
-      plugins: plugins,
+      doc: Node.fromJSON(schema.current, doc),
+      schema: schema.current,
+      plugins: plugins.current,
     }),
   );
 

packages/docs/src/css/custom.scss

@@ -2,6 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
+@import '@edybara/devkit/styles/devkit.scss';
 @import '@edybara/preset/styles/preset.scss';
 
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:[email protected]&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@@ -76,6 +77,12 @@ body {
   overflow: hidden;
 }
 
+.markdown {
+  .edybara-view-editor-root {
+    height: 500px;
+  }  
+}
+
 .edybara-root {
   width: 100%;
   border-radius: 8px;

packages/docs/tsconfig.json

@@ -19,6 +19,7 @@
       "@edybara/emoji": ["../emoji/src/index.ts"],
       "@edybara/heading": ["../heading/src/index.ts"],
       "@edybara/command": ["../command/src/index.ts"],
+      "@edybara/devkit": ["../devkit/src/index.ts"],
       "@edybara/hr": ["../hr/src/index.ts"],
       "@edybara/paragraph": ["../paragraph/src/index.ts"],
       "@edybara/flat-list": ["../flat-list/src/index.ts"],

packages/tables/src/components/cell-button.ts

@@ -1,5 +1,10 @@
 import { html, EdybaraSelect } from '@edybara/ui';
 import { Fragment } from 'preact';
+import { EditorView } from 'prosemirror-view';
+
+export interface EdybaraTableCellButtonWrapperProps {
+  editorView: EditorView;
+}
 
 export const EdybaraTableCellButtonWrapper = () => {
   return html`