Add basic kerebron support#267
Merged
Merged
Conversation
Deploying ui with
|
| Latest commit: |
afaf0f2
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://28c5ec0d.ui-6d0.pages.dev |
| Branch Preview URL: | https://feat-kerebron.ui-6d0.pages.dev |
There was a problem hiding this comment.
Pull request overview
This PR introduces initial integration of the Kerebron editor into @mieweb/ui by adding new editor wrapper components, wiring up Storybook to serve Kerebron WASM assets, and including Kerebron-provided CSS.
Changes:
- Add new
RichEditorandCodeEditorcomponents undersrc/components/RichEditor/. - Add Kerebron CSS imports to the library base stylesheet.
- Add Kerebron packages and Storybook static asset mapping for
@kerebron/wasmassets, and export the new editor module from the main entrypoint.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/base.css | Imports Kerebron editor CSS into the library’s global stylesheet. |
| src/index.ts | Exports the new RichEditor module from the main package entrypoint. |
| src/components/RichEditor/RichEditor.tsx | Adds a Kerebron AdvancedEditorKit wrapper component with markdown preview logic. |
| src/components/RichEditor/CodeEditor.tsx | Adds a Kerebron CodeEditorKit wrapper component. |
| src/components/RichEditor/RichEditor.stories.tsx | Adds Storybook stories intended to demonstrate controlled editor usage. |
| src/components/RichEditor/index.ts | Adds barrel exports for RichEditor and CodeEditor. |
| package.json | Adds Kerebron packages (currently under devDependencies). |
| .storybook/main.ts | Serves @kerebron/wasm assets via staticDirs at /kerebron-wasm. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Collaborator
Author
|
# Conflicts: # package.json
The @kerebron/editor, @kerebron/editor-kits, and @kerebron/wasm packages are used in published code (src/index.ts exports RichEditor/CodeEditor and src/styles/base.css imports their CSS), so they must be runtime dependencies rather than devDependencies — otherwise the published @mieweb/ui package fails to resolve them for consumers. Also regenerates pnpm-lock.yaml (was out of sync with package.json, which was causing the Cloudflare Pages build to fail with ERR_PNPM_OUTDATED_LOCKFILE under --frozen-lockfile). Verified: pnpm install --frozen-lockfile clean, storybook build succeeds.
…bpath entry Implements the PR #267 Copilot review feedback: - RichEditor/CodeEditor: add explicit props interfaces (value/onChange, plus lang for CodeEditor) and wire editor transactions to onChange. Seed initial content via loadDocumentText and populate the preview once on mount instead of waiting for the first transaction. Fixes the typecheck failure where the stories passed props the React.FC<{}> components didn't accept. - RichEditor: gate the markdown-output preview behind a showPreview prop and render md directly (no more 'Loading...' shown for legitimately empty content). - Move the Kerebron editors off the main entry to an optional subpath: @mieweb/ui/kerebron (src/kerebron.ts) + @mieweb/ui/kerebron.css, mirroring the AG Grid/DataVis pattern. Removes the @kerebron CSS from the global base.css and the export from src/index.ts so consumers who don't use the editor don't ship Kerebron's code/WASM/CSS. - package.json: @kerebron/* are now optional peerDependencies (kept in devDependencies for our own build/storybook/tests); add ./kerebron and ./kerebron.css exports and a copy:kerebron-css build step; mark @kerebron/* external in tsup. - Remove leftover '// App.tsx or MyEditor.tsx' sample-code headers. - Add RichEditor/CodeEditor smoke tests (Kerebron module mocked). - Storybook: load kerebron.css in preview so editor stories stay styled. Verified: tsc clean, eslint clean, prettier clean, 200 unit tests pass, library build + storybook build succeed, pnpm install --frozen-lockfile clean.
Comment on lines
+7
to
+14
| export interface RichEditorProps { | ||
| /** Initial markdown content to load into the editor. */ | ||
| value?: string; | ||
| /** Called with the editor's markdown content whenever it changes. */ | ||
| onChange?: (value: string) => void; | ||
| /** Whether to render the live markdown output preview. Defaults to `false`. */ | ||
| showPreview?: boolean; | ||
| } |
Comment on lines
+16
to
+21
| const RichEditor: React.FC<RichEditorProps> = ({ | ||
| value = '', | ||
| onChange, | ||
| showPreview = false, | ||
| }) => { | ||
| const editorRef = useRef<HTMLDivElement>(null); |
Comment on lines
+7
to
+14
| export interface CodeEditorProps { | ||
| /** Initial source code to load into the editor. */ | ||
| value?: string; | ||
| /** Called with the editor's contents whenever they change. */ | ||
| onChange?: (value: string) => void; | ||
| /** Language/grammar to use for syntax highlighting. Defaults to `typescript`. */ | ||
| lang?: string; | ||
| } |
Comment on lines
+16
to
+22
| const CodeEditor: React.FC<CodeEditorProps> = ({ | ||
| value = '', | ||
| onChange, | ||
| lang = 'typescript', | ||
| }) => { | ||
| const editorRef = useRef<HTMLDivElement>(null); | ||
| const editorInstance = useRef<CoreEditor | null>(null); |
Comment on lines
+1
to
+5
| import { useState } from 'react'; | ||
| import type { Meta, StoryObj } from '@storybook/react-vite'; | ||
| import { RichEditor } from './RichEditor'; | ||
| import { CodeEditor } from './CodeEditor'; | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.