@crimson-education/helios-editor-renderer 0.0.7 → 0.0.8

package/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crimson-education/helios-editor-renderer",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {

package/project.json

@@ -0,0 +1,37 @@
+{
+  "name": "helios-editor-renderer",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/helios-editor-renderer/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": [
+        "{options.outputPath}"
+      ],
+      "options": {
+        "outputPath": "dist/packages/helios-editor-renderer",
+        "main": "packages/helios-editor-renderer/src/index.ts",
+        "tsConfig": "packages/helios-editor-renderer/tsconfig.lib.json",
+        "assets": [
+          "packages/helios-editor-renderer/*.md"
+        ]
+      }
+    },
+    "nx-release-publish": {
+      "options": {
+        "packageRoot": "dist/{projectRoot}"
+      }
+    }
+  },
+  "release": {
+    "version": {
+      "generatorOptions": {
+        "packageRoot": "dist/{projectRoot}",
+        "currentVersionResolver": "git-tag",
+        "fallbackCurrentVersionResolver": "disk"
+      }
+    }
+  }
+}

package/src/lib/editor.tsx

@@ -0,0 +1,341 @@
+import { withProps } from '@udecode/cn';
+import {
+  type Value,
+  BaseParagraphPlugin,
+  createSlateEditor,
+  SlateLeaf,
+} from '@udecode/plate';
+import { BaseAlignPlugin } from '@udecode/plate-alignment';
+import {
+  BaseBoldPlugin,
+  BaseCodePlugin,
+  BaseItalicPlugin,
+  BaseStrikethroughPlugin,
+  BaseSubscriptPlugin,
+  BaseSuperscriptPlugin,
+  BaseUnderlinePlugin,
+} from '@udecode/plate-basic-marks';
+import { BaseBlockquotePlugin } from '@udecode/plate-block-quote';
+import {
+  BaseCodeBlockPlugin,
+  BaseCodeLinePlugin,
+  BaseCodeSyntaxPlugin,
+} from '@udecode/plate-code-block';
+import { BaseCommentsPlugin } from '@udecode/plate-comments';
+import { BaseDatePlugin } from '@udecode/plate-date';
+import {
+  BaseFontBackgroundColorPlugin,
+  BaseFontColorPlugin,
+  BaseFontSizePlugin,
+} from '@udecode/plate-font';
+import {
+  BaseHeadingPlugin,
+  BaseTocPlugin,
+  HEADING_KEYS,
+  HEADING_LEVELS,
+} from '@udecode/plate-heading';
+import { BaseHighlightPlugin } from '@udecode/plate-highlight';
+import { BaseHorizontalRulePlugin } from '@udecode/plate-horizontal-rule';
+import { BaseIndentPlugin } from '@udecode/plate-indent';
+import { BaseIndentListPlugin } from '@udecode/plate-indent-list';
+import { BaseKbdPlugin } from '@udecode/plate-kbd';
+import { BaseColumnItemPlugin, BaseColumnPlugin } from '@udecode/plate-layout';
+import { BaseLineHeightPlugin } from '@udecode/plate-line-height';
+import { BaseLinkPlugin } from '@udecode/plate-link';
+import {
+  BaseEquationPlugin,
+  BaseInlineEquationPlugin,
+} from '@udecode/plate-math';
+import {
+  BaseAudioPlugin,
+  BaseFilePlugin,
+  BaseImagePlugin,
+  BaseMediaEmbedPlugin,
+  BaseVideoPlugin,
+} from '@udecode/plate-media';
+import { BaseMentionPlugin } from '@udecode/plate-mention';
+import {
+  BaseTableCellHeaderPlugin,
+  BaseTableCellPlugin,
+  BaseTablePlugin,
+  BaseTableRowPlugin,
+} from '@udecode/plate-table';
+import { BaseTogglePlugin } from '@udecode/plate-toggle';
+import { all, createLowlight } from 'lowlight';
+
+// import { MediaEmbedElement } from '@crimson-education/helios-plate/lib/plate-ui/media-embed-element';
+import { BlockquoteElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/blockquote-element-static';
+import { CodeBlockElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/code-block-element-static';
+import { CodeLeafStatic } from '@crimson-education/helios-plate/lib/plate-ui/code-leaf-static';
+import { CodeLineElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/code-line-element-static';
+import { CodeSyntaxLeafStatic } from '@crimson-education/helios-plate/lib/plate-ui/code-syntax-leaf-static';
+import { ColumnElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/column-element-static';
+import { ColumnGroupElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/column-group-element-static';
+import { CommentLeafStatic } from '@crimson-education/helios-plate/lib/plate-ui/comment-leaf-static';
+import { DateElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/date-element-static';
+import { EditorStatic } from '@crimson-education/helios-plate/lib/plate-ui/editor-static';
+import { HeadingElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/heading-element-static';
+import { HighlightLeafStatic } from '@crimson-education/helios-plate/lib/plate-ui/highlight-leaf-static';
+import { HrElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/hr-element-static';
+import { ImageElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/image-element-static';
+import {
+  FireLiComponent,
+  FireMarker,
+} from '@crimson-education/helios-plate/lib/plate-ui/indent-fire-marker';
+import {
+  TodoLiStatic,
+  TodoMarkerStatic,
+} from '@crimson-education/helios-plate/lib/plate-ui/indent-todo-marker-static';
+import { KbdLeafStatic } from '@crimson-education/helios-plate/lib/plate-ui/kbd-leaf-static';
+import { LinkElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/link-element-static';
+import { MediaAudioElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/media-audio-element-static';
+import { MediaFileElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/media-file-element-static';
+import { MediaVideoElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/media-video-element-static';
+import { MentionElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/mention-element-static';
+import { ParagraphElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/paragraph-element-static';
+import {
+  TableCellElementStatic,
+  TableCellHeaderStaticElement,
+} from '@crimson-education/helios-plate/lib/plate-ui/table-cell-element-static';
+import { TableElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/table-element-static';
+import { TableRowElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/table-row-element-static';
+// import { TocElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/toc-element-static';
+import { ToggleElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/toggle-element-static';
+
+// q&a
+import { QASectionTitleElement } from '@crimson-education/helios-plate/lib/plate-ui/qa-section-title-element';
+import { QASectionSubtitleElement } from '@crimson-education/helios-plate/lib/plate-ui/qa-section-subtitle-element';
+import { QAHeaderElement } from '@crimson-education/helios-plate/lib/plate-ui/qa-header-element';
+import { QABodyElement } from '@crimson-education/helios-plate/lib/plate-ui/qa-body-element';
+import { QAItemElement } from '@crimson-education/helios-plate/lib/plate-ui/qa-item-element';
+import { QASectionElement } from '@crimson-education/helios-plate/lib/plate-ui/qa-section-element';
+import {
+  ELEMENT_QA_SECTION,
+  QASectionPlugin,
+} from '@crimson-education/helios-plate/lib/editor/plugins/qa-section-plugin';
+import {
+  ELEMENT_QA_ITEM,
+  QAItemPlugin,
+} from '@crimson-education/helios-plate/lib/editor/plugins/qa-item-plugin';
+import {
+  ELEMENT_QA_SECTION_TITLE,
+  QASectionTitlePlugin,
+} from '@crimson-education/helios-plate/lib/editor/plugins/qa-section-title-plugin';
+import {
+  ELEMENT_QA_SECTION_SUBTITLE,
+  QASectionSubtitlePlugin,
+} from '@crimson-education/helios-plate/lib/editor/plugins/qa-section-subtitle-plugin';
+import {
+  ELEMENT_QA_HEADER,
+  QAHeaderPlugin,
+} from '@crimson-education/helios-plate/lib/editor/plugins/qa-header-plugin';
+import {
+  ELEMENT_QA_BODY,
+  QABodyPlugin,
+} from '@crimson-education/helios-plate/lib/editor/plugins/qa-body-plugin';
+
+// essay
+import { EssayExcerptTitleElement } from '@crimson-education/helios-plate/lib/plate-ui/essay-excerpt-title-element';
+import { EssayExcerptSubtitleElement } from '@crimson-education/helios-plate/lib/plate-ui/essay-excerpt-subtitle-element';
+import { EssayExcerptElement } from '@crimson-education/helios-plate/lib/plate-ui/essay-excerpt-element';
+import { EssayExcerptBodyElement } from '@crimson-education/helios-plate/lib/plate-ui/essay-excerpt-body';
+import {
+  ELEMENT_ESSAY_EXCERPT,
+  EssayExcerptPlugin,
+} from '@crimson-education/helios-plate/lib/editor/plugins/essay-excerpt-plugin';
+import {
+  ELEMENT_ESSAY_EXCERPT_TITLE,
+  EssayExcerptTitlePlugin,
+} from '@crimson-education/helios-plate/lib/editor/plugins/essay-excerpt-title-plugin';
+import {
+  ELEMENT_ESSAY_EXCERPT_SUBTITLE,
+  EssayExcerptSubtitlePlugin,
+} from '@crimson-education/helios-plate/lib/editor/plugins/essay-excerpt-subtitle-plugin';
+import {
+  ELEMENT_ESSAY_EXCERPT_BODY,
+  EssayExcerptBodyPlugin,
+} from '@crimson-education/helios-plate/lib/editor/plugins/essay-excerpt-body-plugin';
+
+// quote
+import {
+  ELEMENT_QUOTE_BLOCK,
+  QuoteBlockPlugin,
+} from '@crimson-education/helios-plate/lib/editor/plugins/quote-block-plugin';
+import {
+  ELEMENT_QUOTE_AUTHOR,
+  QuoteAuthorPlugin,
+} from '@crimson-education/helios-plate/lib/editor/plugins/quote-author-plugin';
+import { QuoteBlockElement } from '@crimson-education/helios-plate/lib/plate-ui/quote-block-element';
+import { QuoteAuthorElement } from '@crimson-education/helios-plate/lib/plate-ui/quote-author-element';
+import { MediaEmbedElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/media-embed-element-static';
+
+const lowlight = createLowlight(all);
+
+interface EditorProps {
+  value: Value;
+}
+export function RichEditor({ value }: EditorProps) {
+  const components = {
+    [ELEMENT_QUOTE_BLOCK]: QuoteBlockElement,
+    [ELEMENT_QUOTE_AUTHOR]: QuoteAuthorElement,
+    [ELEMENT_ESSAY_EXCERPT_BODY]: EssayExcerptBodyElement,
+    [ELEMENT_ESSAY_EXCERPT_TITLE]: EssayExcerptTitleElement,
+    [ELEMENT_ESSAY_EXCERPT_SUBTITLE]: EssayExcerptSubtitleElement,
+    [ELEMENT_ESSAY_EXCERPT]: EssayExcerptElement,
+    [ELEMENT_QA_SECTION_TITLE]: QASectionTitleElement,
+    [ELEMENT_QA_SECTION_SUBTITLE]: QASectionSubtitleElement,
+    [ELEMENT_QA_HEADER]: QAHeaderElement,
+    [ELEMENT_QA_ITEM]: QAItemElement,
+    [ELEMENT_QA_BODY]: QABodyElement,
+    [ELEMENT_QA_SECTION]: QASectionElement,
+    [BaseAudioPlugin.key]: MediaAudioElementStatic,
+    [BaseBlockquotePlugin.key]: BlockquoteElementStatic,
+    [BaseBoldPlugin.key]: withProps(SlateLeaf, { as: 'strong' }),
+    [BaseCodeBlockPlugin.key]: CodeBlockElementStatic,
+    [BaseCodeLinePlugin.key]: CodeLineElementStatic,
+    [BaseCodePlugin.key]: CodeLeafStatic,
+    [BaseCodeSyntaxPlugin.key]: CodeSyntaxLeafStatic,
+    [BaseColumnItemPlugin.key]: ColumnElementStatic,
+    [BaseColumnPlugin.key]: ColumnGroupElementStatic,
+    [BaseCommentsPlugin.key]: CommentLeafStatic,
+    [BaseDatePlugin.key]: DateElementStatic,
+    [BaseFilePlugin.key]: MediaFileElementStatic,
+    [BaseHighlightPlugin.key]: HighlightLeafStatic,
+    [BaseHorizontalRulePlugin.key]: HrElementStatic,
+    [BaseImagePlugin.key]: ImageElementStatic,
+    [BaseItalicPlugin.key]: withProps(SlateLeaf, { as: 'em' }),
+    [BaseKbdPlugin.key]: KbdLeafStatic,
+    [BaseLinkPlugin.key]: LinkElementStatic,
+    [BaseMediaEmbedPlugin.key]: MediaEmbedElementStatic,
+    [BaseMentionPlugin.key]: MentionElementStatic,
+    [BaseParagraphPlugin.key]: ParagraphElementStatic,
+    [BaseStrikethroughPlugin.key]: withProps(SlateLeaf, { as: 'del' }),
+    [BaseSubscriptPlugin.key]: withProps(SlateLeaf, { as: 'sub' }),
+    [BaseSuperscriptPlugin.key]: withProps(SlateLeaf, { as: 'sup' }),
+    [BaseTableCellHeaderPlugin.key]: TableCellHeaderStaticElement,
+    [BaseTableCellPlugin.key]: TableCellElementStatic,
+    [BaseTablePlugin.key]: TableElementStatic,
+    [BaseTableRowPlugin.key]: TableRowElementStatic,
+    // [BaseTocPlugin.key]: TocElementStatic, // use nextjs custom toc
+    [BaseTogglePlugin.key]: ToggleElementStatic,
+    [BaseUnderlinePlugin.key]: withProps(SlateLeaf, { as: 'u' }),
+    [BaseVideoPlugin.key]: MediaVideoElementStatic,
+    [HEADING_KEYS.h1]: withProps(HeadingElementStatic, { variant: 'h1' }),
+    [HEADING_KEYS.h2]: withProps(HeadingElementStatic, { variant: 'h2' }),
+    [HEADING_KEYS.h3]: withProps(HeadingElementStatic, { variant: 'h3' }),
+    [HEADING_KEYS.h4]: withProps(HeadingElementStatic, { variant: 'h4' }),
+    [HEADING_KEYS.h5]: withProps(HeadingElementStatic, { variant: 'h5' }),
+    [HEADING_KEYS.h6]: withProps(HeadingElementStatic, { variant: 'h6' }),
+  };
+
+  const editor = createSlateEditor({
+    plugins: [
+      BaseMediaEmbedPlugin,
+      QuoteBlockPlugin,
+      QuoteAuthorPlugin,
+      EssayExcerptBodyPlugin,
+      EssayExcerptPlugin,
+      EssayExcerptTitlePlugin,
+      EssayExcerptSubtitlePlugin,
+      QASectionSubtitlePlugin,
+      QASectionTitlePlugin,
+      QASectionPlugin,
+      QAItemPlugin,
+      QABodyPlugin,
+      QAHeaderPlugin,
+      BaseEquationPlugin,
+      BaseInlineEquationPlugin,
+      BaseColumnPlugin,
+      BaseColumnItemPlugin,
+      BaseTocPlugin,
+      BaseVideoPlugin,
+      BaseAudioPlugin,
+      BaseParagraphPlugin,
+      BaseHeadingPlugin,
+      BaseMediaEmbedPlugin,
+      BaseBoldPlugin,
+      BaseCodePlugin,
+      BaseItalicPlugin,
+      BaseStrikethroughPlugin,
+      BaseSubscriptPlugin,
+      BaseSuperscriptPlugin,
+      BaseUnderlinePlugin,
+      BaseBlockquotePlugin,
+      BaseDatePlugin,
+      BaseCodeBlockPlugin.configure({
+        options: {
+          lowlight,
+        },
+      }),
+      BaseIndentPlugin.extend({
+        inject: {
+          targetPlugins: [
+            BaseParagraphPlugin.key,
+            BaseBlockquotePlugin.key,
+            BaseCodeBlockPlugin.key,
+          ],
+        },
+      }),
+      BaseIndentListPlugin.extend({
+        inject: {
+          targetPlugins: [
+            BaseParagraphPlugin.key,
+            ...HEADING_LEVELS,
+            BaseBlockquotePlugin.key,
+            BaseCodeBlockPlugin.key,
+            BaseTogglePlugin.key,
+          ],
+        },
+        options: {
+          listStyleTypes: {
+            fire: {
+              liComponent: FireLiComponent,
+              markerComponent: FireMarker,
+              type: 'fire',
+            },
+            todo: {
+              liComponent: TodoLiStatic,
+              markerComponent: TodoMarkerStatic,
+              type: 'todo',
+            },
+          },
+        },
+      }),
+      BaseLinkPlugin,
+      BaseTableRowPlugin,
+      BaseTablePlugin,
+      BaseTableCellPlugin,
+      BaseHorizontalRulePlugin,
+      BaseFontColorPlugin,
+      BaseFontBackgroundColorPlugin,
+      BaseFontSizePlugin,
+      BaseKbdPlugin,
+      BaseAlignPlugin.extend({
+        inject: {
+          targetPlugins: [
+            BaseParagraphPlugin.key,
+            BaseMediaEmbedPlugin.key,
+            ...HEADING_LEVELS,
+            BaseImagePlugin.key,
+          ],
+        },
+      }),
+      BaseLineHeightPlugin,
+      BaseHighlightPlugin,
+      BaseFilePlugin,
+      BaseImagePlugin,
+      BaseMentionPlugin,
+      BaseCommentsPlugin,
+      BaseTogglePlugin,
+    ],
+    value,
+  });
+
+  // const editorHtml = await serializeHtml(editor, {
+  //   components,
+  //   editorComponent: EditorStatic,
+  //   props: { style: { padding: '0 calc(50% - 350px)', paddingBottom: '' } },
+  // });
+
+  return <EditorStatic components={components} editor={editor} />;
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["vite/client"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

package/vite.config.ts

@@ -0,0 +1,42 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/packages/helios-editor-renderer',
+  plugins: [
+    react(),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin(['*.md']),
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+    }),
+  ],
+  build: {
+    outDir: '../../dist/packages/helios-editor-renderer',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'helios-editor-renderer',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+    },
+  },
+}));