Project setup

1. Copy the source/resources/js/ tree into your project, e.g. src/bookstack/.
2. Copy source/tsconfig.json and merge its compilerOptions into your own tsconfig.json. Key flags: "moduleResolution": "bundler", "target": "ES2022", "strict": true.
3. In your bundler alias config (Vite example below), ensure bare specifiers like lexical resolve to your installed node_modules:

// vite.config.ts resolve.alias – no extra aliases needed; standard node_modules resolution applies

4. Install all dependencies listed above.
5. If your project does not use Laravel, strip or ignore the Blade (.blade.php) template references. The JS/TS layer is fully standalone.
6. The Lexical editor (resources/js/wysiwyg/) has no Laravel-specific coupling; import it directly.
7. CodeMirror viewer/editor setup lives in resources/js/code/; import addCopyIcon, getDirectionFromCodeBlock etc. from resources/js/code/index.mjs.
8. Register UI components by importing from resources/js/components/index.ts and binding them to DOM elements with your preferred component mounting strategy.

Public API

createPageEditorInstance

function createPageEditorInstance(
  container: HTMLElement,
  htmlContent: string,
  options?: Record<string, any>
): SimpleWysiwygEditorInterface

Creates a full Lexical-based WYSIWYG page editor inside container, pre-populated with htmlContent. Returns a SimpleWysiwygEditorInterface with methods to read/write HTML content. Use this when you need a rich-text wiki page editor with toolbar, table resizing, task lists, keyboard shortcuts, and mention support wired up automatically.

addCopyIcon

function addCopyIcon(editorView: EditorView): void

Attaches a clipboard copy button to an existing CodeMirror EditorView DOM node. The button copies the full editor document text to the clipboard and briefly shows a check icon. Use this whenever you render a read-only or editable CodeMirror instance and want one-click copy behaviour consistent with BookStack's UI.

Component exports (components/index.ts)

// All named exports follow this pattern:
export { MarkdownEditor } from './markdown-editor';
export { CodeEditor }     from './code-editor';
export { ImageManager }   from './image-manager';
// ... and 50+ others

Each export is a self-contained web component class. Wire them to DOM nodes by instantiating with a root element. Use MarkdownEditor for a CodeMirror-backed Markdown editing surface, CodeEditor for syntax-highlighted code snippet editing, and ImageManager for the full media library modal.

Working examples

Scenario - Embedding the WYSIWYG page editor

Render a Lexical-backed rich-text editor in a <div> and extract HTML on save.

import { createPageEditorInstance } from './bookstack/wysiwyg/index';

const container = document.getElementById('editor-root') as HTMLElement;
const initialHtml = '<p>Hello <strong>world</strong></p>';

const editorInstance = createPageEditorInstance(container, initialHtml, {
  // Additional options forwarded to buildEditorUI
});

document.getElementById('save-btn')?.addEventListener('click', async () => {
  // SimpleWysiwygEditorInterface exposes getContentAsHtml()
  const html: string = await (editorInstance as any).getContentAsHtml();
  console.log('Saving HTML:', html);
});

Scenario - Adding a CodeMirror viewer with copy button

Display a read-only code block for an existing <pre> element and attach the copy icon.

import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { addCopyIcon } from './bookstack/code/index.mjs';
import { viewerExtensions } from './bookstack/code/setups';

const pre = document.querySelector('pre.code-block') as HTMLElement;
const code = pre.textContent ?? '';

const view = new EditorView({
  state: EditorState.create({
    doc: code,
    extensions: viewerExtensions('javascript'),
  }),
  parent: pre,
});

addCopyIcon(view);

Scenario - Mounting a BookStack UI component

Use the Dropdown component class on a custom nav element without the full Laravel stack.

import { Dropdown } from './bookstack/components/index';

// BookStack components expect a root HTMLElement.
// Each component class typically accepts the element in its constructor
// or via a static `build` method – check the individual component file.
const triggerEl = document.getElementById('my-dropdown') as HTMLElement;
const dropdown = new (Dropdown as any)(triggerEl);

// Components wire their own event listeners internally.
// No further setup required for basic usage.
console.log('Dropdown mounted', dropdown);

File walkthrough

• resources/js/code/index.mjs - CodeMirror integration: addCopyIcon, direction detection, and element-level syntax highlighting helpers.
• resources/js/components/index.ts - Barrel export of all 50+ UI components (editors, modals, dropdowns, sortable lists, etc.).
• resources/js/wysiwyg/index.ts - Lexical WYSIWYG editor factory: createPageEditorInstance wires nodes, history, rich text, toolbars, decorators, and keyboard handling.
• resources/js/wysiwyg/lexical/clipboard/index.ts - Re-exports Lexical clipboard utilities ($getHtmlContent, copyToClipboard, etc.) for programmatic clipboard access.
• resources/js/wysiwyg/lexical/core/index.ts - Re-exports core Lexical types (LexicalEditor, LexicalNode, RangeSelection, etc.) for TypeScript consumers.
• app/ - PHP backend (Laravel controllers, models, LDAP/SAML2/OIDC access layers); not consumed by the JS layer.
• routes/ - Laravel HTTP route definitions; relevant only if integrating the PHP backend.
• lang/ - PHP and JS translation files; wire into your i18n system if needed.
• public/ - Compiled output directory; not part of the source build input.

Common pitfalls and fixes

• .mjs extension not resolved: Some bundlers skip .mjs by default; add '.mjs' to resolve.extensions in Vite/Webpack config.
• @ssddanbrown/codemirror-lang-smarty not found: This is a scoped public package; run npm install from a network-connected environment; do not alias to a local path.
• Lexical peer version mismatch: @lexical/history, @lexical/rich-text, and @lexical/utils must all share the exact same lexical version; pin them together in package.json with overrides if hoisting causes splits.
• SimpleWysiwygEditorInterface not exported: The type is declared inside wysiwyg/index.ts implicitly; cast the return value of createPageEditorInstance to any or define a local interface mirroring its methods (getContentAsHtml, focus, etc.) until the upstream exports it explicitly.
• CodeMirror viewerExtensions / editorExtensions missing: These are local modules in resources/js/code/setups; copy the entire code/ directory, not just index.mjs.
• ESM/CJS interop with snabbdom: snabbdom ships ESM-only in recent versions; ensure your bundler does not try to CommonJS-require it. Set "type": "module" in your package or use Vite which handles this transparently.

Vibe-coding prompt template

I have dropped the BookStack frontend source into `src/bookstack/` and have
installed all dependencies listed in USAGE.md. The upstream project is
BookStack (bookstack-app), a PHP/Laravel wiki platform whose JS/TS frontend
lives in `resources/js/`.

Please help me integrate the following into my existing project step by step:

1. Read `src/bookstack/resources/js/wysiwyg/index.ts` and show me how to
   call `createPageEditorInstance` to embed the WYSIWYG editor in my
   `<div id="editor">` element and retrieve HTML on form submit.

2. Read `src/bookstack/resources/js/code/index.mjs` and show me how to
   create a read-only CodeMirror viewer for a `<pre>` element and attach
   the copy button using `addCopyIcon`.

3. Read `src/bookstack/resources/js/components/index.ts` and show me how
   to mount the `MarkdownEditor` and `Dropdown` components on existing DOM
   nodes in my app.

4. Update my `tsconfig.json` and `vite.config.ts` (or webpack config) to
   resolve `.mjs` files and avoid ESM/CJS issues with `snabbdom` and the
   `@ssddanbrown/*` CodeMirror language packages.

Reference USAGE.md for real export names and dependency versions. Do not
invent any APIs not present in the source files.

License and credit

BookStack is released under the MIT License (see source/LICENSE). The upstream project is maintained by Dan Brown and contributors at https://github.com/BookStackApp/BookStack. The embedded Lexical core (resources/js/wysiwyg/lexical/) contains files copyright Meta Platforms, Inc., also under the MIT license as noted in their file headers.

This product’s unique contribution is clean room implementation of valuable code block into AVCP compatible standard.

전체 설치 가이드와 연동 프롬프트는 구매 후 열람할 수 있습니다.