@dxos/react-ui-editor 0.4.4-next.e0df51e → 0.4.4

package/src/components/TextEditor/hooks.stories.tsx

@@ -4,14 +4,16 @@
 
 import '@dxosTheme';
 
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 
-import { useThemeContext } from '@dxos/react-ui';
+import { Toolbar as NaturalToolbar, Select, useThemeContext } from '@dxos/react-ui';
 import { attentionSurface, mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { TextEditor } from './TextEditor';
 import {
+  type EditorMode,
+  EditorModes,
   code,
   createMarkdownExtensions,
   formatting,
@@ -45,11 +47,10 @@ type StoryProps = {
 const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
   const { themeMode } = useThemeContext();
   const [formattingState, trackFormatting] = useFormattingState();
-  const { parentRef, view } = useTextEditor({
-    autoFocus,
-    doc,
-    extensions: [
-      //
+  const [editorMode, setEditorMode] = useState<EditorMode>('default');
+  const extensions = useMemo(
+    () => [
+      editorMode ? EditorModes[editorMode] : [],
       createDataExtensions({ readonly }),
       createThemeExtensions({
         themeMode,
@@ -71,16 +72,19 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
       tasklist(),
       trackFormatting,
     ],
-  });
+    [editorMode, themeMode, placeholder, trackFormatting, readonly],
+  );
+  const { parentRef, view } = useTextEditor({ autoFocus, doc, extensions });
 
   const handleAction = useActionHandler(view);
 
-  // FIXME This doesn't update the state on view changes. Also not
-  // sure if view is even guaranteed to exist at this point.
+  // TODO(marijn) This doesn't update the state on view changes.
+  //  Also not sure if view is even guaranteed to exist at this point.
   return (
     <div role='none' className={mx('fixed inset-0', editorWithToolbarLayout)}>
       <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
         <Toolbar.Markdown />
+        <EditorModeToolbar editorMode={editorMode} setEditorMode={setEditorMode} />
       </Toolbar.Root>
       <div role='none' className='overflow-y-auto'>
         <div
@@ -93,6 +97,36 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
   );
 };
 
+const EditorModeToolbar = ({
+  editorMode,
+  setEditorMode,
+}: {
+  editorMode: EditorMode;
+  setEditorMode: (mode: EditorMode) => void;
+}) => {
+  return (
+    <Select.Root value={editorMode} onValueChange={(value) => setEditorMode(value as EditorMode)}>
+      <NaturalToolbar.Button asChild>
+        <Select.TriggerButton variant='ghost'>{editorMode}</Select.TriggerButton>
+      </NaturalToolbar.Button>
+      <Select.Portal>
+        <Select.Content>
+          <Select.ScrollUpButton />
+          <Select.Viewport>
+            {['default', 'vim'].map((mode) => (
+              <Select.Option key={mode} value={mode}>
+                {mode}
+              </Select.Option>
+            ))}
+          </Select.Viewport>
+          <Select.ScrollDownButton />
+          <Select.Arrow />
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+};
+
 export default {
   title: 'react-ui-editor/useTextEditor',
   component: TextEditor,

package/src/hooks/useTextEditor.ts

@@ -34,6 +34,7 @@ export type UseTextEditor = {
 /**
  * Hook for creating editor.
  */
+// TODO(wittjosiah): Does not work in strict mode.
 export const useTextEditor = ({
   autoFocus,
   scrollTo,
@@ -45,7 +46,9 @@ export const useTextEditor = ({
   const onUpdate = useRef<() => void>();
   const [view, setView] = useState<EditorView>();
   const parentRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
+    let view: EditorView;
     if (parentRef.current) {
       // https://codemirror.net/docs/ref/#state.EditorStateConfig
       const state = EditorState.create({
@@ -64,7 +67,7 @@ export const useTextEditor = ({
       });
 
       // https://codemirror.net/docs/ref/#view.EditorViewConfig
-      const view = new EditorView({
+      view = new EditorView({
         parent: parentRef.current,
         scrollTo,
         state,
@@ -84,7 +87,8 @@ export const useTextEditor = ({
     return () => {
       view?.destroy();
     };
-  }, [parentRef]);
+    // TODO(wittjosiah): Does `parentRef` ever change? Only `.current` changes?
+  }, [parentRef, extensions]);
 
   useEffect(() => {
     if (view) {