@crimson-education/helios-editor-renderer 1.1.2 → 1.1.3

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": "1.1.2",
+  "version": "1.1.3",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -40,4 +40,4 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }
-}
+}

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,458 @@
+'use client';
+
+import { useMemo } from 'react';
+import { Plate, PlateContent, createPlateEditor } from '@udecode/plate/react';
+
+import {
+  type Value,
+  BaseParagraphPlugin,
+  Descendant,
+  SlateLeaf,
+  TText,
+} 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 { 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-static';
+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-static';
+import { EssayExcerptBodyElement } from '@crimson-education/helios-plate/lib/plate-ui/essay-excerpt-body-static';
+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';
+
+// import { CleanPastePlugin } from '@crimson-education/helios-plate/lib/editor/plugins/clean-paste-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 { QuoteBlockElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/quote-block-element-static';
+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';
+
+import {
+  TABLE_HEADING_SPECIAL,
+  tableHeaderSpecailPlugin,
+} from '@crimson-education/helios-plate/lib/editor/plugins/table-header-specail-plugin';
+import { TableHeadingSpecialStatic } from '@crimson-education/helios-plate/lib/plate-ui/table-header-special-static';
+
+import {
+  CALLOUT_BOX,
+  CalloutBoxPlugin,
+} from '@crimson-education/helios-plate/lib/editor/plugins/callout-box-plugin';
+import { CalloutBoxElementStatic } from '@crimson-education/helios-plate/lib/plate-ui/callout-box-element-static';
+import {
+  CALLOUT_CONTENT,
+  CalloutContentPlugin,
+} from '@crimson-education/helios-plate/lib/editor/plugins/callout-content-plugin';
+import { CalloutContentElement } from '@crimson-education/helios-plate/lib/plate-ui/callout-content-element';
+import {
+  CALLOUT_TITLE,
+  CalloutTitlePlugin,
+} from '@crimson-education/helios-plate/lib/editor/plugins/callout-title-plugin';
+import { CalloutTitleElement } from '@crimson-education/helios-plate/lib/plate-ui/callout-title-element';
+import { LinkElementWithLocaleStatic } from '@crimson-education/helios-plate/lib/plate-ui/link-element-with-local-static';
+
+import { withProps } from '@udecode/cn';
+
+const lowlight = createLowlight(all);
+
+// Utility function to convert straight quotes to curly quotes
+function convertToCurlyQuotes(text: string): string {
+  if (!text?.includes('"') && !text?.includes('“') && !text?.includes('”')) {
+    return text;
+  }
+  // Pattern to match any non-English (non-ASCII) characters
+  // Matches any character with code point > 127 (outside ASCII range)
+  const nonEnglishPattern = '[^\x00-\x7F]';
+  // Use a unique placeholder string that's extremely unlikely to appear in content
+  const placeholder = '\uE000\uE001\uE002QUOTEPLACEHOLDER\uE003\uE004\uE005';
+
+  // Replace quotes adjacent to non-English characters with placeholder
+  text = text.replace(
+    new RegExp(`(${nonEnglishPattern})"|"(${nonEnglishPattern})`, 'g'),
+    (match, before, after) => {
+      if (before) return before + placeholder;
+      return placeholder + after;
+    }
+  );
+
+  // Replace opening double quotes
+  text = text.replace(/(^|[-\u2014/\s(\u2018[])"/g, '$1\u201c');
+  // Replace closing double quotes
+  text = text.replace(/"/g, '\u201d');
+
+  // Restore original quotes (replace placeholder back to straight quote)
+  text = text.replace(
+    new RegExp(placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'),
+    '"'
+  );
+
+  return text;
+}
+
+// Recursively transform all text nodes in the editor value
+function isTextNode(node: Descendant): node is TText {
+  return 'text' in node && typeof node.text === 'string';
+}
+
+function transformQuotesInValue(value: Value): Value {
+  return value.map((node: Descendant) => {
+    if (isTextNode(node)) {
+      // This is a text node
+      return {
+        ...node,
+        text: convertToCurlyQuotes(node.text),
+      };
+    } else if ('children' in node && Array.isArray(node.children)) {
+      // This is a parent node with children
+      return {
+        ...node,
+        children: transformQuotesInValue(node.children as Value),
+      };
+    }
+    return node;
+  }) as Value;
+}
+
+interface RichEditorProps {
+  value: Value;
+  readOnly?: boolean;
+  locale?: string;
+}
+
+export function RichEditor({
+  value,
+  readOnly = false,
+  locale = 'en',
+}: RichEditorProps) {
+  // Transform straight quotes to curly quotes (only for English locales)
+  const transformedValue = useMemo(() => {
+    const isEnglish = locale.toLowerCase().startsWith('en');
+    return isEnglish ? transformQuotesInValue(value) : value;
+  }, [value, locale]);
+
+  const components = useMemo(
+    () => ({
+      [CALLOUT_TITLE]: CalloutTitleElement,
+      [CALLOUT_CONTENT]: CalloutContentElement,
+      [CALLOUT_BOX]: CalloutBoxElementStatic,
+      [TABLE_HEADING_SPECIAL]: TableHeadingSpecialStatic,
+      [ELEMENT_QA_SECTION]: QASectionElement,
+      [ELEMENT_QA_ITEM]: QAItemElement,
+      [ELEMENT_QA_HEADER]: QAHeaderElement,
+      [ELEMENT_QA_BODY]: QABodyElement,
+      [ELEMENT_QA_SECTION_TITLE]: QASectionTitleElement,
+      [ELEMENT_QA_SECTION_SUBTITLE]: QASectionSubtitleElement,
+      [ELEMENT_ESSAY_EXCERPT]: EssayExcerptElement,
+      [ELEMENT_ESSAY_EXCERPT_BODY]: EssayExcerptBodyElement,
+      [ELEMENT_ESSAY_EXCERPT_TITLE]: EssayExcerptTitleElement,
+      [ELEMENT_ESSAY_EXCERPT_SUBTITLE]: EssayExcerptSubtitleElement,
+      [ELEMENT_QUOTE_BLOCK]: QuoteBlockElementStatic,
+      [ELEMENT_QUOTE_AUTHOR]: QuoteAuthorElement,
+      [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]: (props: any) => (
+        <LinkElementWithLocaleStatic {...props} locale={locale} />
+      ),
+      // [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,
+      [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 = useMemo(
+    () =>
+      createPlateEditor({
+        plugins: [
+          CalloutContentPlugin,
+          CalloutTitlePlugin,
+          CalloutBoxPlugin,
+          tableHeaderSpecailPlugin,
+          BaseMediaEmbedPlugin,
+          QuoteBlockPlugin,
+          QuoteAuthorPlugin,
+          EssayExcerptBodyPlugin,
+          EssayExcerptPlugin,
+          EssayExcerptTitlePlugin,
+          EssayExcerptSubtitlePlugin,
+          QASectionSubtitlePlugin,
+          QASectionTitlePlugin,
+          QASectionPlugin,
+          QAItemPlugin,
+          QABodyPlugin,
+          QAHeaderPlugin,
+          BaseEquationPlugin,
+          BaseInlineEquationPlugin,
+          BaseColumnPlugin,
+          BaseColumnItemPlugin,
+          BaseTocPlugin,
+          BaseVideoPlugin,
+          BaseAudioPlugin,
+          BaseParagraphPlugin,
+          BaseHeadingPlugin,
+          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,
+          BaseKbdPlugin,
+          BaseAlignPlugin.extend({
+            inject: {
+              targetPlugins: [
+                BaseParagraphPlugin.key,
+                BaseMediaEmbedPlugin.key,
+                ...HEADING_LEVELS,
+                BaseImagePlugin.key,
+              ],
+            },
+          }),
+          BaseLineHeightPlugin,
+          BaseHighlightPlugin,
+          BaseFilePlugin,
+          BaseImagePlugin,
+          BaseMentionPlugin,
+          BaseCommentsPlugin,
+          BaseTogglePlugin,
+        ],
+        value: transformedValue,
+        override: {
+          components,
+        },
+      }),
+    [transformedValue, components]
+  );
+
+  return (
+    <Plate editor={editor} onChange={() => {}}>
+      <PlateContent readOnly={true} />
+    </Plate>
+  );
+}

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,29 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "moduleResolution": "bundler", 
+    "module": "esnext",
+    "target": "esnext", 
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ],
+    "skipLibCheck": true 
+  },
+  "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'],
+    },
+  },
+}));