chore: viewMode prop

src/stories/boilerplate.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import React from 'react'
-import { JsxComponentDescriptors, SandpackConfig, Wrapper } from '..'
+import { JsxComponentDescriptors, SandpackConfig, ViewMode, Wrapper } from '..'
 import dataCode from './assets/dataCode.ts?raw'
 
 const defaultSnippetContent = `
@@ -62,12 +62,14 @@ const jsxDescriptors: JsxComponentDescriptors = [
 interface WrappedEditorProps {
   markdown: string
   onChange?: (markdown: string) => void
+  viewMode?: ViewMode
 }
 
-export const WrappedLexicalEditor: React.FC<WrappedEditorProps> = ({ markdown, onChange }) => {
+export const WrappedLexicalEditor: React.FC<WrappedEditorProps> = ({ viewMode, markdown, onChange }) => {
   return (
     <Wrapper
       markdown={markdown}
+      viewMode={viewMode}
       headMarkdown={markdown}
       sandpackConfig={virtuosoSampleSandpackConfig}
       jsxComponentDescriptors={jsxDescriptors}

src/stories/hello.stories.tsx

@@ -21,3 +21,7 @@ export function CodeBlocks() {
 export function JSX() {
   return <WrappedLexicalEditor onChange={(markdown) => console.log(markdown)} markdown={jsxMarkdown} />
 }
+
+export function DiffMode() {
+  return <WrappedLexicalEditor markdown={initialMarkdown} viewMode="diff" />
+}

src/system/ViewMode.ts

@@ -29,7 +29,9 @@ export const [ViewModeSystem] = system(
       ([{ current }, editor, markdownValue, jsxComponentDescriptors]) => {
         // we're switching away from the editor, update the source.
         if (current === 'editor') {
-          r.pub(markdownSource, getStateAsMarkdown(editor!, jsxComponentDescriptors))
+          if (editor) {
+            r.pub(markdownSource, getStateAsMarkdown(editor, jsxComponentDescriptors))
+          }
         } else if (current === 'markdown') {
           // we're switching away from the markdown editor, convert the source back to lexical nodes.
           editor?.update(() => {

src/system/index.tsx

@@ -23,6 +23,9 @@ export const {
       sandpackConfig: 'sandpackConfig',
       nodeDecorators: 'nodeDecorators',
     },
+    optional: {
+      viewMode: 'viewMode',
+    },
     events: {
       onChange: 'onChange',
     },

src/ui/SourcePlugin/DiffViewer.tsx

@@ -8,6 +8,7 @@ import 'react-diff-view/style/index.css'
 
 export function DiffViewer({ oldText, newText }: { oldText: string; newText: string }) {
   const diffText = formatLines(diffLines(oldText, newText), { context: 3 })
+  if (diffText.trim() === '') return <div className="font-sans">No changes</div>
   const [diff] = parseDiff(diffText, { nearbySequences: 'zip' })
 
   return (

src/ui/Wrapper/index.tsx

@@ -19,6 +19,7 @@ import {
   LinkDialogPlugin,
   ToolbarPlugin,
   UsedLexicalNodes,
+  ViewMode,
   ViewModeToggler,
 } from '../../'
 import { EditorSystemComponent } from '../../system'
@@ -46,6 +47,7 @@ interface WrappedEditorProps {
   headMarkdown: string
   sandpackConfig: SandpackConfigValue
   jsxComponentDescriptors: JsxComponentDescriptors
+  viewMode?: ViewMode
   onChange?: (markdown: string) => void
 }
 
@@ -69,7 +71,14 @@ function patchMarkdownTransformers(transformers: Transformer[]) {
   return transformers
 }
 
-export const Wrapper: React.FC<WrappedEditorProps> = ({ markdown, headMarkdown, jsxComponentDescriptors, sandpackConfig, onChange }) => {
+export const Wrapper: React.FC<WrappedEditorProps> = ({
+  markdown,
+  headMarkdown,
+  jsxComponentDescriptors,
+  sandpackConfig,
+  onChange,
+  viewMode,
+}) => {
   return (
     <div className="p-3 max-w-[90rem] border-slate-100 border-solid border-2">
       <LexicalComposer initialConfig={standardConfig(markdown)}>
@@ -79,6 +88,7 @@ export const Wrapper: React.FC<WrappedEditorProps> = ({ markdown, headMarkdown,
           jsxComponentDescriptors={jsxComponentDescriptors}
           sandpackConfig={sandpackConfig}
           onChange={onChange}
+          viewMode={viewMode}
           nodeDecorators={nodeDecorators}
         >
           <ToolbarPlugin />