block node and createEditor

packages/editor/cypress/component/figure.cy.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { render, waitFor } from './utils';
+import userEvent from '@testing-library/user-event';
+import { createStore, DemoEditor } from '../../demo/NewEditorDemo';
+
+// TODO: abstract these they are copy pasted from demo since the setup logic is shared
+const stateKey = 'myEditor';
+const viewId1 = 'view1';
+
+const TABLE_CONTENT = `<table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Data over here</td> <td colspan="2">Multiple columns!</td> </tr> </tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>`;
+const FIGURE_CONTENT = `
+<pre language="typescript" linenumbers><code>function sayHello() {
+  console.log("Hello editing!");
+}</code></pre>
+`;
+const IMAGE_CONTENT =
+  '<img src="https://curvenote.dev/images/logo.png" align="center" width="70%" />';
+const IFRAME_CONTENT =
+  '<iframe src="https://www.loom.com/embed/524085f9c64e4652a12bd81a374d58df" align="center" width="70%" ></iframe>';
+function generateFigureSnippet(content: string) {
+  const SNIPPET_WITH_TABLE = `
+		<div class="block" id="first">
+			<figure numbered id="fig1">
+			${content}
+			<figcaption kind="fig"><p>this is caption!</p></figcaption>
+			</figure>
+		</div>
+	`;
+  return SNIPPET_WITH_TABLE;
+}
+const TABLE_FIGURE_SNIPPET = generateFigureSnippet(TABLE_CONTENT);
+const CODEBLOCK_FIGURE_SNIPPET = generateFigureSnippet(TABLE_CONTENT);
+const IMAGE_FIGURE_SNIPPET = generateFigureSnippet(IMAGE_CONTENT);
+const IFRAME_FIGURE_SNIPPET = generateFigureSnippet(IFRAME_CONTENT);
+
+it('should render curvenote link with the correct attributes', () => {
+  const { container } = render(<DemoEditor content={TABLE_FIGURE_SNIPPET} />);
+  expect(container.querySelector('table')).to.be.instanceOf(HTMLTableElement);
+  expect(container.querySelector('figcaption')?.innerHTML).to.be.eq('this is caption!');
+});
+
+[
+  TABLE_FIGURE_SNIPPET,
+  CODEBLOCK_FIGURE_SNIPPET,
+  IMAGE_FIGURE_SNIPPET,
+  IFRAME_FIGURE_SNIPPET,
+].forEach((snippet) => {
+  it('should create one new paragraph below the figure if hit enter within figure caption', async () => {
+    const store = createStore();
+    const { container } = render(
+      <DemoEditor content={snippet} store={store} stateKey={stateKey} viewId={viewId1} />,
+    );
+    await waitFor(() => {
+      expect(container.querySelector('figcaption')).to.be.ok;
+    })
+    const figcaption = container.querySelector('figcaption') as HTMLElement;
+    userEvent.click(figcaption);
+    await userEvent.keyboard('hello{Enter}{Enter}', { delay: 10 });
+    await waitFor(() => {
+      expect(
+        container.querySelectorAll('#first > div')[1]?.querySelectorAll(':scope > p').length, // there should be one and only one paragraph gets created;
+      ).to.eq(1);
+    });
+  });
+});

packages/editor/demo/NewEditorDemo.tsx

@@ -0,0 +1,148 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Provider } from 'react-redux';
+import { createTheme } from '@material-ui/core';
+import { ReferenceKind } from '@curvenote/schema';
+import { Fragment } from 'prosemirror-model';
+import type { Store, LinkResult } from '../src';
+import {
+  middleware,
+  EditorMenu,
+  Suggestions,
+  actions,
+  createEditor,
+  Attributes,
+  InlineActions,
+} from '../src';
+import SuggestionSwitch from '../src/components/Suggestion/Switch';
+import InlineActionSwitch from '../src/components/InlineActions/Switch';
+import Editor from '../src/components/NextEditor';
+import rootReducer from './reducers';
+import 'codemirror/lib/codemirror.css';
+import '../styles/index.scss';
+import 'sidenotes/dist/sidenotes.css';
+import type { Options } from '../src/connect';
+import { configureStore } from '@reduxjs/toolkit';
+
+declare global {
+  interface Window {
+    [index: string]: any;
+  }
+}
+
+const DEFAULT_STATE_KEY = 'myEditor';
+const viewId1 = 'view1';
+const docId = 'docId';
+const someLinks: LinkResult[] = [
+  {
+    kind: ReferenceKind.cite,
+    uid: 'simpeg2015',
+    label: 'simpeg',
+    content: 'Cockett et al., 2015',
+    title:
+      'SimPEG: An open source framework for simulation and gradient based parameter estimation in geophysical applications.',
+  },
+  {
+    kind: ReferenceKind.link,
+    uid: 'https://curvenote.com',
+    label: null,
+    content: 'Curvenote',
+    title: 'Move ideas forward',
+  },
+];
+
+export function createStore(): Store {
+  return configureStore({
+    reducer: rootReducer,
+    middleware: (getDefaultMiddleware: any) => {
+      return [
+        ...middleware,
+        ...getDefaultMiddleware({
+          serializableCheck: false,
+          immutableCheck: false,
+        }),
+      ];
+    },
+  });
+}
+
+const theme = createTheme({});
+function createOptions(store: Store) {
+  const newComment = () => {
+    store.dispatch(actions.addCommentToSelectedView('sidenote1'));
+  };
+  const removeComment = () => {
+    store.dispatch(actions.removeComment(viewId1, 'sidenote1'));
+  };
+  return {
+    transformKeyToId: (key) => key,
+    uploadImage: async (file) => {
+      // eslint-disable-next-line no-console
+      console.log(file);
+      return new Promise((resolve) =>
+        setTimeout(() => resolve('https://curvenote.dev/images/logo.png'), 2000),
+      );
+    },
+    getDocId() {
+      return docId;
+    },
+    addComment() {
+      newComment();
+      return true;
+    },
+    onDoubleClick(stateId, viewId) {
+      // eslint-disable-next-line no-console
+      console.log('Double click', stateId, viewId);
+      return false;
+    },
+    theme,
+    citationPrompt: async () => [
+      {
+        key: 'simpeg2015',
+        kind: ReferenceKind.cite,
+        text: 'Cockett et al, 2015',
+        label: 'simpeg',
+        title: '',
+      },
+    ],
+    createLinkSearch: async () => ({ search: () => someLinks }),
+    getCaptionFragment: (schema) => Fragment.fromArray([schema.text('Hello caption world!')]),
+    nodeViews: {},
+  } as Options;
+}
+
+export function DemoEditor({
+  content,
+  store = createStore(),
+  stateKey = DEFAULT_STATE_KEY,
+  viewId = viewId1,
+}: {
+  content: string;
+  store?: Store;
+  viewId?: string;
+  stateKey?: string;
+}) {
+  const editor = useMemo(() => createEditor(store, createOptions(store)), []);
+  useEffect(() => {
+    window.store = store;
+    return () => {
+      window.store = undefined;
+    };
+  }, [store]);
+  return (
+    <Provider store={store}>
+      <React.StrictMode>
+        <article id={docId} className="content centered">
+          <EditorMenu standAlone />
+          <InlineActions>
+            <InlineActionSwitch />
+          </InlineActions>
+          <Editor editor={editor} stateKey={stateKey} viewId={viewId} initialContent={content} />
+          <Suggestions>
+            <SuggestionSwitch />
+          </Suggestions>
+          <Attributes />
+        </article>
+      </React.StrictMode>
+    </Provider>
+  );
+}

packages/editor/demo/index.html

@@ -65,7 +65,7 @@
       crossorigin="anonymous"
     />
   </head>
-  <body>
+  <body style="margin: 0px; padding: 0;">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div class="centered">
       <h1>@curvenote/editor</h1>

packages/editor/demo/index.tsx

@@ -1,6 +1,57 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { DemoEditor } from './init';
-import snippet from './snippet';
+import { DemoEditor as NextEditor } from './NewEditorDemo';
+import snippet, { snippetNext } from './snippet';
+import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
+import { styled } from '@stitches/react';
 
-ReactDOM.render(<DemoEditor content={snippet} />, document.getElementById('root'));
+const Container = styled('div', {
+  margin: 'auto',
+  width: 800,
+});
+const Ul = styled('ul', {
+  listStyle: 'none',
+  fontSize: 24,
+  marginTop: 16,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  li: {
+    padding: 16,
+  },
+});
+
+function App() {
+  return (
+    <>
+      <Container>
+        <nav>
+          <Ul>
+            <li>
+              <Link to="/">Legacy</Link>
+            </li>
+            <li>
+              <Link to="/article">Article</Link>
+            </li>
+          </Ul>
+        </nav>
+
+        <Switch>
+          <Route exact path="/">
+            <DemoEditor content={snippet} />
+          </Route>
+          <Route exact path="/article">
+            <NextEditor content={snippetNext} />
+          </Route>
+        </Switch>
+      </Container>
+    </>
+  );
+}
+ReactDOM.render(
+  <Router>
+    <App />
+  </Router>,
+  document.getElementById('root'),
+);

packages/editor/demo/init.tsx

@@ -5,23 +5,14 @@ import { Button, createTheme } from '@material-ui/core';
 import { toHTML, toMarkdown, toTex, ReferenceKind, process, toText } from '@curvenote/schema';
 import { Sidenote, AnchorBase } from 'sidenotes';
 import { Fragment } from 'prosemirror-model';
-import {
-  actions,
-  Editor,
-  EditorMenu,
-  Store,
-  setup,
-  Suggestions,
-  Attributes,
-  InlineActions,
-  LinkResult,
-} from '../src';
+import type { Store, LinkResult } from '../src';
+import { actions, Editor, EditorMenu, setup, Suggestions, Attributes, InlineActions } from '../src';
 import rootReducer from './reducers';
 import middleware from './middleware';
 import 'codemirror/lib/codemirror.css';
 import '../styles/index.scss';
 import 'sidenotes/dist/sidenotes.css';
-import { Options } from '../src/connect';
+import type { Options } from '../src/connect';
 import SuggestionSwitch from '../src/components/Suggestion/Switch';
 import InlineActionSwitch from '../src/components/InlineActions/Switch';
 
@@ -142,15 +133,15 @@ export function DemoEditor({ content, store = createStore() }: { content: string
       }
       // Update the counter
       const counts = process.countState(editor.state);
-      const words = process.countWords(editor.state);
+      // const words = process.countWords(editor.state);
       const updates = {
         'count-sec': `${counts.sec.all.length} (${counts.sec.total})`,
         'count-fig': `${counts.fig.all.length} (${counts.fig.total})`,
         'count-eq': `${counts.eq.all.length} (${counts.eq.total})`,
         'count-code': `${counts.code.all.length} (${counts.code.total})`,
         'count-table': `${counts.table.all.length} (${counts.table.total})`,
-        'count-words': `${words.words}`,
-        'count-char': `${words.characters_including_spaces}  (${words.characters_excluding_spaces})`,
+        // 'count-words': `${words.words}`,
+        // 'count-char': `${words.characters_including_spaces}  (${words.characters_excluding_spaces})`,
       };
       Object.entries(updates).forEach(([key, count]) => {
         const el = document.getElementById(key);

packages/editor/demo/reducers.ts

@@ -1,7 +1,8 @@
 import runtime from '@curvenote/runtime';
 import * as sidenotes from 'sidenotes';
 import { combineReducers } from 'redux';
-import { State, EditorActions, Reducer, reducer } from '../src';
+import type { State, EditorActions, Reducer } from '../src';
+import { reducer } from '../src';
 
 const combinedReducers: Reducer = combineReducers({
   editor: reducer,

packages/editor/demo/snippet.html

@@ -1,4 +1,5 @@
-<h1>Welcome to <code>@curvenote/editor</code>!</h1>
+	<h1>Welcome to <code>@curvenote/editor</code>!</h1>
+
 <p>
   Feel free to ➡️ edit this document ⬅️, or for collaborative editing, check out
   <a href="https://curvenote.com">curvenote.com</a>, which is a scientific writing platform that
@@ -32,6 +33,8 @@ <h1>Welcome to <code>@curvenote/editor</code>!</h1>
     <p><code></code> for code or <code>```</code> for a code block!</p>
   </li>
 </ul>
+
+
 <p>
   You can also configure the editor to show citations, like this one from Geophysics
   <cite-group><cite key="simpeg2015" inline="Cockett et al, 2015"></cite></cite-group>. Try
@@ -81,6 +84,8 @@ <h2>You can insert code:</h2>
 <h2>You can insert footnotes:</h2>
 <p>This is a footnote<span class="footnote">👋</span>. You can access it using the <code>/footnote</code> command<span class="footnote">Or the menu under the plus!</span></p>
 
+
+
 <aside class="callout info">
   <p>
     Speaking of commands! Try starting with a forward slash <code>/</code> after this callout
@@ -128,3 +133,6 @@ <h2>Interactivity</h2>
   align="center"
   width="70%"
 ></iframe>
+
+
+

packages/editor/demo/snippet.ts

@@ -1,5 +1,7 @@
 import html from './snippet.html';
+import nextSnippet from './snippetNext.html';
 
 const snippet = html;
+export const snippetNext = nextSnippet;
 
 export default snippet;