@eventuras/scribo 0.4.2 → 0.8.1

package/CHANGELOG.md

@@ -0,0 +1,53 @@
+# @eventuras/scribo
+
+## 0.8.1
+
+### Patch Changes
+
+- chore: update dependencies across frontend packages
+
+## 0.8.0
+
+### Minor Changes
+
+### 🧱 Features
+
+- feat(scribo): auto heigh expanding (6ca2322) [@eventuras/scribo]
+
+### 🐞 Bug Fixes
+
+- fix(scribo): import MarkdownEditor.css for styling (d1eec7a) [@eventuras/scribo]
+- fix(scribo): disable swc in scribo (ebce6db) [@eventuras/scribo]
+
+### ♻️ Refactoring
+
+- refactor(scribo): merge markdowninput into scribo with flexible styling (373587e) [@eventuras/scribo]
+
+### 🧹 Maintenance
+
+- chore(scribo): externalize Lexical packages in build configuration (7c7caaf) [@eventuras/scribo]
+- chore(convertoapi,docsite,web,markdown,scribo,sdk): upgrade deps (b2de638) [@eventuras/scribo]
+
+### ⚙️ CI/CD
+
+- ci(scribo): implement automated release workflow for Scribo (36d6ba1) [@eventuras/scribo]
+
+## 0.7.1
+
+### Patch Changes
+
+- - chore(convertoapi,docsite,web,markdown,scribo,sdk): upgrade deps (51e931b) [@eventuras/scribo]
+
+## 0.7.0
+
+### Minor Changes
+
+- ## Initial history (pre-Changesets)
+  - chore(scribo): upgrade lexical (f78dfa1)
+  - chore(scribo): update packages (3475e0f)
+  - feat(scribo): use readme as default content of editor page (428fc2b)
+  - fix(scribo): add dependency (101954b)
+  - feat(scribo): cache npm files for scribo build (a065b61)
+  - feat(scribo): add undo/redo to markdown editor (b2482cc)
+  - feat(scribo): adds links and link editing to editor (afe159d)
+  - feat(scribo): set up scribo demo site (a467bc2)

package/README.md

@@ -1,26 +1,121 @@
 # Scribo markdown editor
 
-Markdown editor built on [Lexical framework](https://lexical.dev/). Intended to be used as part of eventuras, but also packed as a standalone component. Scribo is a WYSIWYG edito with markdown export.
+Markdown editor built on [Lexical framework](https://lexical.dev/). Intended to be used as part of eventuras, but also packed as a standalone component. Scribo is a WYSIWYG editor with markdown export.
 
 The editor should provide simple and intuitive editing of markdown text, with a focus on the most common use cases.
 
+Test the [scribo editor online demo](https://scribo.losol.no/).
+
+> **Lexical version**: we are keeping the lexical version in sync with the [lexical version used in Payload CMS](https://github.com/payloadcms/payload/blob/main/packages/richtext-lexical/package.json), to prevent multiple versions making trouble.
+
+## Installation
+
+```bash
+pnpm add @eventuras/scribo
+```
+
+## Usage
+
+**Important**: You must import the CSS file for Scribo to display correctly:
+
+### MarkdownEditor (WYSIWYG Editor)
+
+```tsx
+import "@eventuras/scribo/style.css";
+import { MarkdownEditor } from "@eventuras/scribo";
+
+function MyComponent() {
+  return <MarkdownEditor defaultValue="# Hello World" />;
+}
+```
+
+### MarkdownInput (Form-ready Input)
+
+For use with native HTML forms (FormData API):
+
+```tsx
+import "@eventuras/scribo/style.css";
+import { MarkdownInput } from "@eventuras/scribo";
+
+function MyForm() {
+  return (
+    <form>
+      <MarkdownInput
+        name="description"
+        label="Description"
+        placeholder="Enter markdown..."
+        defaultValue="# Hello"
+        maxLength={500}
+        className="mb-4"
+        labelClassName="font-bold"
+        editorClassName="border rounded"
+        errorClassName="text-red-500"
+      />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+The `MarkdownInput` component is framework-agnostic and provides:
+
+- Hidden input for FormData submission
+- Optional label and validation
+- Flexible styling via className props
+- Character limit validation
+
+### Peer Dependencies
+
+Scribo requires the following peer dependencies:
+
+```bash
+pnpm add react react-dom lexical @lexical/code @lexical/hashtag @lexical/link @lexical/list @lexical/mark @lexical/markdown @lexical/overflow @lexical/react @lexical/rich-text @lexical/selection @lexical/table @lexical/utils prismjs
+```
+
+**Prism.js for syntax highlighting:**  
+Scribo uses Prism.js for code syntax highlighting but does not bundle it. You need to install `prismjs` and import the language grammars you need in your application.
+
+Example:
+
+```tsx
+import "prismjs";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-css";
+// Import other languages as needed
+```
+
 ## Develop
 
 To start developing Scribo, run the following commands:
 
 ```bash
-npm install
+pnpm install
 vite dev
 ```
 
-## Publish
+## Release
+
+Quick release process:
+
+```bash
+# 1. Create changeset (choose one)
+pnpm changeset                 # Manual (recommended)
+pnpm changeset:suggest         # Auto-generate from commits
+
+# 2. Version package
+pnpm changeset:version
 
-To publish a new version of the package:
+# 3. Commit and push (create PR to main)
+git checkout -b release/scribo-v0.x.x
+git add .
+git commit -m "chore(scribo): release v0.x.x"
+git push origin release/scribo-v0.x.x
+
+# 4. Merge PR to main, then automated workflow will publish to npm and create GitHub release
+```
 
-1. Update version number in package.json
-1. `npm run build`
-1. `npm login --scope @eventuras --auth-type web`
-1. `npm publish --access public`
+For detailed release instructions, including setup and troubleshooting, see [RELEASE.md](./RELEASE.md).
 
 ## Credits
 

package/RELEASE.md

@@ -0,0 +1,102 @@
+# Release Instructions for @eventuras/scribo
+
+This document explains how to configure the automated release workflow for `@eventuras/scribo`.
+
+## Release Process
+
+### Standard Release
+
+1. **Create changesets** for your changes:
+
+   ```bash
+   # Option A: Manual (recommended for better changelog messages)
+   pnpm changeset
+   
+   # Option B: Auto-generate from commits (review and edit after)
+   pnpm changeset:suggest
+   ```
+
+   > **Tip**: `changeset:suggest` analyzes your git commits since the last release and automatically generates changeset files. Review the generated changesets and edit them for clarity if needed.
+
+2. **Version the package** when ready:
+
+   ```bash
+   pnpm changeset:version
+   ```
+
+3. **Commit and push** the version bump:
+
+   ```bash
+   git add .
+   git commit -m "chore(scribo): release v0.x.x"
+   git push origin main
+   ```
+
+4. **Automated workflow** will:
+   - ✅ Build the package
+   - ✅ Publish to npm with provenance
+   - ✅ Create Git tag `@eventuras/scribo@x.x.x`
+   - ✅ Create GitHub Release with changelog
+
+### Manual Release
+
+If the automated workflow fails or you need to publish manually:
+
+```bash
+cd libs/scribo
+pnpm build
+npm login --scope @eventuras --auth-type web
+npm publish --access public
+```
+
+## Release Setup
+
+### NPM Trusted Publishing Setup (Recommended)
+
+Scribo uses **npm trusted publishing with OIDC** for secure, token-free publishing.
+
+#### Configure Trusted Publisher on npmjs.com
+
+1. Log in to [npmjs.com](https://www.npmjs.com)
+2. Navigate to `@eventuras/scribo` package settings
+3. Find **Trusted Publisher** section
+4. Click **GitHub Actions**
+5. Configure:
+   - **Organization or user**: `losol`
+   - **Repository**: `eventuras`
+   - **Workflow filename**: `scribo-release.yml` (include `.yml` extension)
+   - **Environment name**: `scribo-npm`
+6. Click **Add trusted publisher**
+
+#### Set Up GitHub Environment
+
+The workflow uses a GitHub environment for deployment protection (optional but recommended):
+
+1. Go to your GitHub repository
+2. Navigate to **Settings** → **Environments**
+3. Click **New environment**
+4. Name: `scribo-npm`
+5. (Optional) Add protection rules:
+   - Required reviewers if you want manual approval
+   - Deployment branches: Select "Selected branches" and add `main`
+6. Click **Create environment**
+
+> **Note**: With trusted publishing, you don't need to add any secrets to this environment. The workflow uses OIDC authentication automatically.
+
+### Legacy: Token-Based Publishing (Not Recommended)
+
+If you cannot use trusted publishing, you can fall back to traditional npm tokens:
+
+1. Create a granular access token on npmjs.com with write access to `@eventuras/scribo`
+2. Add it as `NODE_AUTH_TOKEN` secret in the `scribo-npm` environment
+3. Update the workflow to include `NODE_AUTH_TOKEN` environment variable in the publish step
+
+However, trusted publishing is strongly recommended for better security.
+
+
+## Workflow Trigger
+
+The release workflow (`.github/workflows/scribo-release.yml`) triggers automatically when:
+
+- Changes are pushed to the `main` branch
+- The file `libs/scribo/package.json` is modified

package/package.json

@@ -1,41 +1,65 @@
 {
   "name": "@eventuras/scribo",
-  "version": "0.4.2",
-  "main": "src/main.tsx",
+  "version": "0.8.1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/losol/eventuras.git",
+    "directory": "libs/scribo"
+  },
   "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/main.js"
+    },
+    "./style.css": "./dist/scribo.css"
+  },
+  "main": "src/main.tsx",
   "scripts": {
     "build": "vite build",
-    "build:site": "BUILD_SITE=true vite build",
+    "build:site": "vite build --config vite.config.site.ts",
     "dev": "vite"
   },
-  "dependencies": {
-    "@lexical/link": "0.28.0",
-    "@lexical/markdown": "^0.28.0",
-    "@lexical/react": "^0.28.0",
-    "lexical": "^0.28.0"
-  },
-  "peerDependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
-  },
-  "devDependencies": {
-    "@eventuras/eslint-config": "*",
-    "@eventuras/typescript-config": "*",
-    "@swc/core": "^1.13.3",
-    "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.1.9",
-    "@types/react-dom": "^19.1.7",
-    "@vitejs/plugin-react-swc": "^4.0.0",
-    "lightningcss": "^1.30.1",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.1",
-    "vitest": "^3.2.4"
-  },
   "overrides": {
     "vite": {
       "rollup": "npm:@rollup/wasm-node"
     }
+  },
+  "dependencies": {
+    "@lexical/code": "0.35.0",
+    "@lexical/hashtag": "0.35.0",
+    "@lexical/link": "0.35.0",
+    "@lexical/list": "0.35.0",
+    "@lexical/mark": "0.35.0",
+    "@lexical/markdown": "0.35.0",
+    "@lexical/overflow": "0.35.0",
+    "@lexical/react": "^0.35.0",
+    "@lexical/rich-text": "0.35.0",
+    "@lexical/selection": "0.35.0",
+    "@lexical/table": "0.35.0",
+    "@lexical/utils": "0.35.0",
+    "lexical": "0.35.0",
+    "prismjs": "^1.30.0"
+  },
+  "devDependencies": {
+    "@eventuras/eslint-config": "workspace:*",
+    "@eventuras/typescript-config": "workspace:*",
+    "@eventuras/vite-config": "workspace:*",
+    "@testing-library/react": "^16.3.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "lightningcss": "^1.30.2",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vitest": "^4.0.16"
+  },
+  "peerDependencies": {
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
+  },
+  "packageManager": "pnpm@10.26.0",
+  "engines": {
+    "node": ">=22.0.0 <25.0.0"
   }
 }

package/src/MarkdownEditor.css

@@ -43,16 +43,64 @@
   z-index: 0;
   overflow: auto;
   resize: vertical;
-  height: 80vh;
 }
 
 .editor {
   flex: auto;
   position: relative;
-  resize: vertical;
   z-index: -1;
 }
 
+.editor p {
+  margin: 0 0 1em 0;
+}
+
+.editor h1,
+.editor h2,
+.editor h3,
+.editor h4,
+.editor h5,
+.editor h6 {
+  margin: 1em 0 0.5em 0;
+  line-height: 1.3;
+}
+
+.editor h1 {
+  font-size: 1.75em;
+}
+
+.editor h2 {
+  font-size: 1.5em;
+}
+
+.editor h3 {
+  font-size: 1.25em;
+}
+
+.editor h4 {
+  font-size: 1.1em;
+}
+
+.editor h5,
+.editor h6 {
+  font-size: 1em;
+}
+
+.editor h1:first-child,
+.editor h2:first-child,
+.editor h3:first-child,
+.editor h4:first-child,
+.editor h5:first-child,
+.editor h6:first-child {
+  margin-top: 0;
+}
+
+.editor blockquote {
+  margin: 1em 0;
+  padding-left: 1em;
+  border-left: 3px solid #ddd;
+}
+
 ul {
   list-style-type: disc;
   padding: 10px 0 !important;

package/src/MarkdownEditor.tsx

@@ -18,26 +18,27 @@ import ToolbarPlugin from "./plugins/ToolbarPlugin";
 import EditorTheme from "./themes/EditorTheme";
 import ContentEditable from "./ui/ContentEditable";
 import Placeholder from "./ui/Placeholder";
-import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
-import "./MarkdownEditor.css";
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import LinkPlugin from "./plugins/LinkPlugin";
 import FloatingLinkEditorPlugin from "./plugins/FloatingLinkEditorPlugin";
 import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
-import {useSharedHistoryContext} from './context/SharedHistoryContext';
+import { useSharedHistoryContext } from './context/SharedHistoryContext';
 
 export type onChangeMisc = {
-  plainText: string
-}
+  plainText: string;
+};
 export interface MarkdownEditorProps {
   initialMarkdown?: string;
   className?: string;
   onChange?: (markdown: string, misc: onChangeMisc) => void;
   onBlur?: () => void;
   placeholder?: string;
+  'data-testid'?: string;
+  id?: string;
 }
 
 const MarkdownEditor: React.FC<MarkdownEditorProps> = (props) => {
-  const {historyState} = useSharedHistoryContext();
+  const { historyState } = useSharedHistoryContext();
   const [isLinkEditMode, setIsLinkEditMode] = useState<boolean>(false);
 
   const [floatingAnchorElem, setFloatingAnchorElem] =
@@ -52,7 +53,7 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = (props) => {
   const internalOnChange = (editorState: EditorState) => {
     editorState.read(() => {
       const markdown = $convertToMarkdownString(TRANSFORMERS);
-      const plainText = $getRoot().getTextContent()
+      const plainText = $getRoot().getTextContent();
       props.onChange && props.onChange(markdown, { plainText });
     });
   };
@@ -72,21 +73,21 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = (props) => {
   return (
     <div className={props.className}>
       <LexicalComposer initialConfig={initialConfig}>
-        <div className="editor-shell" onBlur={props.onBlur}>
+        <div className="editor-shell" onBlur={props.onBlur} data-testid={props['data-testid']} id={props.id}>
           <ToolbarPlugin setIsLinkEditMode={setIsLinkEditMode} />
           <div className="editor-container rich-text">
             <HistoryPlugin externalHistoryState={historyState} />
             <AutoLinkPlugin />
             <LinkPlugin />
             <FloatingLinkEditorPlugin
-                  anchorElem={floatingAnchorElem}
-                  isLinkEditMode={isLinkEditMode}
-                  setIsLinkEditMode={setIsLinkEditMode}
-                />
+              anchorElem={floatingAnchorElem}
+              isLinkEditMode={isLinkEditMode}
+              setIsLinkEditMode={setIsLinkEditMode}
+            />
             <RichTextPlugin
               contentEditable={
                 <div className="editor-scroller">
-                  <div className="editor" ref={onRef}>
+                  <div className="editor" ref={onRef} id={props.id ? `${props.id}-editable` : undefined}>
                     <ContentEditable />
                   </div>
                 </div>

package/src/MarkdownInput.tsx

@@ -0,0 +1,79 @@
+'use client';
+import MarkdownEditor from './MarkdownEditor';
+import { useRef, useState } from 'react';
+
+export type MarkdownInputProps = {
+  id?: string;
+  name: string;
+  maxLength?: number;
+  label?: string;
+  placeholder?: string;
+  defaultValue?: string;
+  className?: string;
+  labelClassName?: string;
+  editorClassName?: string;
+  errorClassName?: string;
+  onChange?: (value: string) => void;
+  'data-testid'?: string;
+};
+
+/**
+ * MarkdownInput component that works standalone or with parent form handling
+ * Uses onChange callback to notify parent of value changes
+ * Framework-agnostic with flexible className props for custom styling
+ */
+const MarkdownInput = (props: MarkdownInputProps) => {
+  const [error, setError] = useState<string | null>(null);
+  const [value, setValue] = useState(props.defaultValue ?? '');
+  const plainTextRef = useRef('');
+  const id = props.id ?? props.name;
+
+  const handleChange = (markdown: string, { plainText }: { plainText: string; }) => {
+    plainTextRef.current = plainText;
+    setValue(markdown);
+
+    // Notify parent component of the change
+    if (props.onChange) {
+      props.onChange(markdown);
+    }
+
+    // Validate maxLength if provided
+    if (props.maxLength && plainText.length >= props.maxLength) {
+      setError(`Maximum ${props.maxLength} characters allowed`);
+    } else {
+      setError(null);
+    }
+  };
+
+  return (
+    <div className={props.className}>
+      {props.label && (
+        <label htmlFor={id} className={props.labelClassName}>
+          {props.label}
+        </label>
+      )}
+      {/* Hidden input to store value - controlled by React state */}
+      <input
+        type="hidden"
+        name={props.name}
+        value={value}
+      />
+      <MarkdownEditor
+        onChange={handleChange}
+        className={props.editorClassName}
+        initialMarkdown={props.defaultValue}
+        placeholder={props.placeholder}
+        data-testid={props['data-testid']}
+        id={id}
+      />
+      {error && (
+        <span role="alert" className={props.errorClassName}>
+          {error}
+        </span>
+      )}
+    </div>
+  );
+};
+
+MarkdownInput.displayName = 'MarkdownInput';
+export default MarkdownInput;

package/src/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { App } from './App'
 import './App.css'
+import './MarkdownEditor.css'
 
 import readmeRaw from '../README.md?raw'
 

package/src/main.tsx

@@ -1,4 +1,6 @@
-
-import MarkdownEditor from "./MarkdownEditor";
-
-export default MarkdownEditor;
+
+import './MarkdownEditor.css';
+import MarkdownEditor from "./MarkdownEditor";
+import MarkdownInput from "./MarkdownInput";
+
+export { MarkdownEditor, MarkdownInput };

package/src/nodes/EditorNodes.ts

@@ -18,6 +18,7 @@ import { HeadingNode, QuoteNode } from "@lexical/rich-text";
 import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
 import type { Klass, LexicalNode } from "lexical";
 
+// Using 'as any' to work around Lexical version conflicts between workspace installs
 const EditorNodes: Array<Klass<LexicalNode>> = [
   HeadingNode,
   ListNode,
@@ -34,6 +35,6 @@ const EditorNodes: Array<Klass<LexicalNode>> = [
   OverflowNode,
   HorizontalRuleNode,
   MarkNode,
-];
+] as any;
 
 export default EditorNodes;

package/src/plugins/FloatingLinkEditorPlugin.tsx

@@ -1,3 +1,5 @@
+// @ts-nocheck
+// https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/FloatingLinkEditorPlugin/index.tsx
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -5,7 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-// https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/FloatingLinkEditorPlugin/index.tsx
 import type {JSX} from 'react';
 
 import './FloatingLinkEditorPlugin.css';
@@ -451,7 +452,7 @@ function useFloatingLinkEditorToolbar(
 }
 
 export default function FloatingLinkEditorPlugin({
-  anchorElem = document.body,
+  anchorElem,
   isLinkEditMode,
   setIsLinkEditMode,
 }: {
@@ -460,9 +461,19 @@ export default function FloatingLinkEditorPlugin({
   setIsLinkEditMode: Dispatch<boolean>;
 }): JSX.Element | null {
   const [editor] = useLexicalComposerContext();
+  
+  // Use document.body as default, but only in browser environment
+  const defaultAnchorElem = typeof document !== 'undefined' ? document.body : null;
+  const effectiveAnchorElem = anchorElem ?? defaultAnchorElem;
+  
+  // Don't render if we don't have a valid anchor element
+  if (!effectiveAnchorElem) {
+    return null;
+  }
+  
   return useFloatingLinkEditorToolbar(
     editor,
-    anchorElem,
+    effectiveAnchorElem,
     isLinkEditMode,
     setIsLinkEditMode,
   );

package/src/plugins/HistoryPlugin.tsx

@@ -140,7 +140,11 @@ function getChangeType(
   }
 
   const nextDirtyNode = dirtyNodes[0];
-  
+
+  if (!nextDirtyNode) {
+    return OTHER;
+  }
+
   const prevDirtyNode = prevEditorState._nodeMap.get(nextDirtyNode.__key);
 
   if (
@@ -299,6 +303,7 @@ function createMergeActionGetter(
       if (dirtyLeaves.size === 1) {
         const dirtyLeafKey = Array.from(dirtyLeaves)[0];
         if (
+          dirtyLeafKey &&
           isTextNodeUnchanged(dirtyLeafKey, prevEditorState, nextEditorState)
         ) {
           return HISTORY_MERGE;

package/src/themes/EditorTheme.css

@@ -9,13 +9,16 @@
 .PlaygroundEditorTheme__ltr {
   text-align: left;
 }
+
 .PlaygroundEditorTheme__rtl {
   text-align: right;
 }
+
 .PlaygroundEditorTheme__paragraph {
   margin: 0;
   position: relative;
 }
+
 .PlaygroundEditorTheme__quote {
   margin: 0;
   margin-left: 20px;
@@ -27,6 +30,7 @@
   border-left-style: solid;
   padding-left: 16px;
 }
+
 .PlaygroundEditorTheme__h1 {
   font-size: 32px;
   line-height: 1.3;
@@ -36,74 +40,90 @@
   font-weight: 700;
   margin: 0;
 }
+
 .PlaygroundEditorTheme__h2 {
-  font-size: 32px;
+  font-size: 24px;
   color: #406280;
   padding-top: 2rem;
-    padding-bottom: 0.5rem;
+  padding-bottom: 0.5rem;
   font-weight: 700;
   margin: 0;
 }
+
 .PlaygroundEditorTheme__h3 {
   font-size: 24px;
   color: #406280;
-    padding-top: 2rem;
-      padding-bottom: 0.5rem;
+  padding-top: 2rem;
+  padding-bottom: 0.5rem;
   font-weight: 700;
   margin: 0;
 }
+
 .PlaygroundEditorTheme__h4 {
   font-size: 16px;
   color: #406280;
-    padding-top: 1.5rem;
-      padding-bottom: 0rem;
+  padding-top: 1.5rem;
+  padding-bottom: 0rem;
   font-weight: 700;
   margin: 0;
 }
+
 .PlaygroundEditorTheme__indent {
   --lexical-indent-base-value: 40px;
 }
+
 .PlaygroundEditorTheme__textBold {
   font-weight: bold;
 }
+
 .PlaygroundEditorTheme__textItalic {
   font-style: italic;
 }
+
 .PlaygroundEditorTheme__textUnderline {
   text-decoration: underline;
 }
+
 .PlaygroundEditorTheme__textStrikethrough {
   text-decoration: line-through;
 }
+
 .PlaygroundEditorTheme__textUnderlineStrikethrough {
   text-decoration: underline line-through;
 }
+
 .PlaygroundEditorTheme__textSubscript {
   font-size: 0.8em;
   vertical-align: sub !important;
 }
+
 .PlaygroundEditorTheme__textSuperscript {
   font-size: 0.8em;
   vertical-align: super;
 }
+
 .PlaygroundEditorTheme__textCode {
   background-color: rgb(240, 242, 245);
   padding: 1px 0.25rem;
   font-family: Menlo, Consolas, Monaco, monospace;
   font-size: 94%;
 }
+
 .PlaygroundEditorTheme__hashtag {
   background-color: rgba(88, 144, 255, 0.15);
   border-bottom: 1px solid rgba(88, 144, 255, 0.3);
 }
+
 .PlaygroundEditorTheme__link {
   color: rgb(33, 111, 219);
   text-decoration: none;
 }
+
 .PlaygroundEditorTheme__link:hover {
   text-decoration: underline;
   cursor: pointer;
 }
+
 .PlaygroundEditorTheme__code {
   background-color: rgb(240, 242, 245);
   font-family: Menlo, Consolas, Monaco, monospace;
@@ -118,6 +138,7 @@
   position: relative;
   tab-size: 2;
 }
+
 .PlaygroundEditorTheme__code:before {
   content: attr(data-gutter);
   position: absolute;
@@ -131,47 +152,56 @@
   text-align: right;
   min-width: 25px;
 }
+
 .PlaygroundEditorTheme__characterLimit {
   display: inline;
   background-color: #ffbbbb !important;
 }
+
 .PlaygroundEditorTheme__ol1 {
   padding: 0;
   margin: 0;
   list-style-position: inside;
 }
+
 .PlaygroundEditorTheme__ol2 {
   padding: 0;
   margin: 0;
   list-style-type: upper-alpha;
   list-style-position: inside;
 }
+
 .PlaygroundEditorTheme__ol3 {
   padding: 0;
   margin: 0;
   list-style-type: lower-alpha;
   list-style-position: inside;
 }
+
 .PlaygroundEditorTheme__ol4 {
   padding: 0;
   margin: 0;
   list-style-type: upper-roman;
   list-style-position: inside;
 }
+
 .PlaygroundEditorTheme__ol5 {
   padding: 0;
   margin: 0;
   list-style-type: lower-roman;
   list-style-position: inside;
 }
+
 .PlaygroundEditorTheme__ul {
   padding: 0;
   margin: 0;
   list-style-position: inside;
 }
+
 .PlaygroundEditorTheme__listItem {
   margin: 0 32px;
 }
+
 .PlaygroundEditorTheme__listItemChecked,
 .PlaygroundEditorTheme__listItemUnchecked {
   position: relative;
@@ -182,9 +212,11 @@
   list-style-type: none;
   outline: none;
 }
+
 .PlaygroundEditorTheme__listItemChecked {
   text-decoration: line-through;
 }
+
 .PlaygroundEditorTheme__listItemUnchecked:before,
 .PlaygroundEditorTheme__listItemChecked:before {
   content: "";
@@ -197,26 +229,31 @@
   background-size: cover;
   position: absolute;
 }
+
 .PlaygroundEditorTheme__listItemUnchecked[dir="rtl"]:before,
 .PlaygroundEditorTheme__listItemChecked[dir="rtl"]:before {
   left: auto;
   right: 0;
 }
+
 .PlaygroundEditorTheme__listItemUnchecked:focus:before,
 .PlaygroundEditorTheme__listItemChecked:focus:before {
   box-shadow: 0 0 0 2px #a6cdfe;
   border-radius: 2px;
 }
+
 .PlaygroundEditorTheme__listItemUnchecked:before {
   border: 1px solid #999;
   border-radius: 2px;
 }
+
 .PlaygroundEditorTheme__listItemChecked:before {
   border: 1px solid rgb(61, 135, 245);
   border-radius: 2px;
   background-color: #3d87f5;
   background-repeat: no-repeat;
 }
+
 .PlaygroundEditorTheme__listItemChecked:after {
   content: "";
   cursor: pointer;
@@ -232,65 +269,83 @@
   transform: rotate(45deg);
   border-width: 0 2px 2px 0;
 }
+
 .PlaygroundEditorTheme__nestedListItem {
   list-style-type: none;
 }
+
 .PlaygroundEditorTheme__nestedListItem:before,
 .PlaygroundEditorTheme__nestedListItem:after {
   display: none;
 }
+
 .PlaygroundEditorTheme__tokenComment {
   color: slategray;
 }
+
 .PlaygroundEditorTheme__tokenPunctuation {
   color: #999;
 }
+
 .PlaygroundEditorTheme__tokenProperty {
   color: #905;
 }
+
 .PlaygroundEditorTheme__tokenSelector {
   color: #690;
 }
+
 .PlaygroundEditorTheme__tokenOperator {
   color: #9a6e3a;
 }
+
 .PlaygroundEditorTheme__tokenAttr {
   color: #07a;
 }
+
 .PlaygroundEditorTheme__tokenVariable {
   color: #e90;
 }
+
 .PlaygroundEditorTheme__tokenFunction {
   color: #dd4a68;
 }
+
 .PlaygroundEditorTheme__mark {
   background: rgba(255, 212, 0, 0.14);
   border-bottom: 2px solid rgba(255, 212, 0, 0.3);
   padding-bottom: 2px;
 }
+
 .PlaygroundEditorTheme__markOverlap {
   background: rgba(255, 212, 0, 0.3);
   border-bottom: 2px solid rgba(255, 212, 0, 0.7);
 }
+
 .PlaygroundEditorTheme__mark.selected {
   background: rgba(255, 212, 0, 0.5);
   border-bottom: 2px solid rgba(255, 212, 0, 1);
 }
+
 .PlaygroundEditorTheme__markOverlap.selected {
   background: rgba(255, 212, 0, 0.7);
   border-bottom: 2px solid rgba(255, 212, 0, 0.7);
 }
+
 .PlaygroundEditorTheme__embedBlock {
   user-select: none;
 }
+
 .PlaygroundEditorTheme__embedBlockFocus {
   outline: 2px solid rgb(60, 132, 244);
 }
+
 .PlaygroundEditorTheme__layoutContaner {
   display: grid;
   gap: 10px;
   margin: 10px 0;
 }
+
 .PlaygroundEditorTheme__layoutItem {
   border: 1px dashed #ddd;
   padding: 8px 16px;

package/src/ui/ContentEditable.tsx

@@ -1,19 +1,21 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import type {JSX} from 'react';
-import "./ContentEditable.css";
-
-import { ContentEditable } from "@lexical/react/LexicalContentEditable";
-
-export default function LexicalContentEditable({
-  className,
-}: {
-  className?: string;
-}): JSX.Element {
-  return <ContentEditable className={className || "ContentEditable__root"} />;
-}
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { JSX } from 'react';
+import "./ContentEditable.css";
+
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+
+export default function LexicalContentEditable({
+  className,
+  id,
+}: {
+  className?: string;
+  id?: string;
+}): JSX.Element {
+  return <ContentEditable className={className || "ContentEditable__root"} id={id} />;
+}

package/vite.config.site.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+
+/**
+ * Vite configuration for building the demo site.
+ * Used explicitly via: vite build --config vite.config.site.ts
+ */
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: 'dist/site',
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+      },
+    },
+  },
+});

package/vite.config.ts

@@ -1,32 +1,33 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react-swc';
-import { resolve } from 'path';
-
-// Check build mode
-const buildSite = process.env.BUILD_SITE === 'true';
-
-export default defineConfig({
-  plugins: [react()],
-  build: buildSite
-    ? {
-      // Build demo site
-      outDir: 'dist/site',
-      }
-    : {
-      // Build library
-        lib: {
-          entry: resolve(__dirname, 'src/main.tsx'),
-          name: 'Scribo',
-          fileName: 'scribo',
-        },
-        rollupOptions: {
-          external: ['react', 'react-dom'],
-          output: {
-            globals: {
-              react: 'React',
-              'react-dom': 'ReactDOM',
-            },
-          },
-        },
-      },
-});
+import { defineReactLibConfig } from '@eventuras/vite-config/react-lib';
+
+/**
+ * Vite configuration for building the Scribo library.
+ * For the demo site, see vite.config.site.ts
+ */
+export default defineReactLibConfig({
+  entry: 'src/main.tsx',
+  useSWC: false,
+  external: [
+    // Externalize all Lexical packages to avoid bundling them
+    'lexical',
+    '@lexical/code',
+    '@lexical/hashtag',
+    '@lexical/history',
+    '@lexical/link',
+    '@lexical/list',
+    '@lexical/markdown',
+    '@lexical/mark',
+    '@lexical/overflow',
+    '@lexical/react',
+    '@lexical/rich-text',
+    '@lexical/selection',
+    '@lexical/text',
+    '@lexical/utils',
+    // Also externalize any sub-exports from @lexical/react
+    /^@lexical\//,
+    // Externalize Prism.js to avoid bundling all language grammars
+    'prismjs',
+    /^prismjs\//,
+  ],
+});
+