Comment and Selection Plugins

demo/Comment.tsx

@@ -0,0 +1,51 @@
+import { makeStyles, Theme } from '@material-ui/core';
+import { createStyles } from '@material-ui/styles';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { v4 } from 'uuid';
+import { actions, Editor } from '../src';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      '& .CodeMirror': {
+        margin: 0,
+      },
+      '& ul': {
+        margin: 0,
+      },
+      '& p': {
+        marginTop: 0,
+        marginBottom: 0,
+        ...theme.typography.subtitle2,
+      },
+    },
+  }),
+);
+
+export default function Comment() {
+  const classes = useStyles();
+  const [identity, updateIdentity] = React.useState<
+    { stateKey: string; viewKey: string; docKey: string } | undefined
+  >(undefined);
+  const dispatch = useDispatch();
+
+  React.useEffect(() => {
+    const id = v4();
+    const stateKey = `statekey-${id}`;
+    const viewKey = `viewkey-${id}`;
+    const docKey = `dockey-${id}`;
+    updateIdentity({
+      stateKey,
+      viewKey,
+      docKey,
+    });
+    dispatch(actions.initEditorState('comment', stateKey, true, '', 0));
+  }, []);
+
+  return (
+    <div className={classes.root}>
+      {identity ? <Editor stateKey={identity.stateKey} viewId={identity.viewKey} /> : null}
+    </div>
+  );
+}

demo/index.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { createStore, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
 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 { v4 } from 'uuid';
 import {
   actions,
   Editor,
@@ -18,33 +19,35 @@ import {
   LinkResult,
 } from '../src';
 import rootReducer from './reducers';
-import middleware from './middleware';
+import createMiddleware from './middleware';
 import 'codemirror/lib/codemirror.css';
 import '../styles/index.scss';
 import 'sidenotes/dist/sidenotes.css';
 import { Options } from '../src/connect';
 import snippet from './snippet';
 import SuggestionSwitch from '../src/components/Suggestion/Switch';
 import InlineActionSwitch from '../src/components/InlineActions/Switch';
+import { addComment } from '../src/store/actions';
+import CommentEditor from './Comment';
 
 declare global {
   interface Window {
     [index: string]: any;
   }
 }
 
-const store: Store = createStore(rootReducer, applyMiddleware(...middleware));
-const theme = createTheme({});
-
 const stateKey = 'myEditor';
 const viewId1 = 'view1';
 const docId = 'docId';
-const newComment = () => {
-  store.dispatch(actions.addCommentToSelectedView('sidenote1'));
-};
-const removeComment = () => {
-  store.dispatch(actions.removeComment(viewId1, 'sidenote1'));
-};
+
+const store: Store = createStore(rootReducer, applyMiddleware(...createMiddleware(viewId1)));
+const theme = createTheme({});
+
+interface Comment {
+  id: string;
+  content: string;
+  color: string;
+}
 
 const someLinks: LinkResult[] = [
   {
@@ -64,6 +67,7 @@ const someLinks: LinkResult[] = [
   },
 ];
 
+let newCommentFn: any;
 const opts: Options = {
   transformKeyToId: (key) => key,
   uploadImage: async (file) => {
@@ -73,18 +77,15 @@ const opts: Options = {
       setTimeout(() => resolve('https://curvenote.dev/images/logo.png'), 2000),
     );
   },
-  addComment() {
-    newComment();
+  addComment(_key: any, _view: any) {
+    newCommentFn();
     return true;
   },
   onDoubleClick(stateId, viewId) {
     // eslint-disable-next-line no-console
     console.log('Double click', stateId, viewId);
     return false;
   },
-  getDocId() {
-    return docId;
-  },
   theme,
   citationPrompt: async () => [
     {
@@ -100,96 +101,119 @@ const opts: Options = {
   nodeViews: {},
 };
 
-setup(store, opts);
-
-window.store = store;
-store.dispatch(actions.initEditorState('full', stateKey, true, snippet, 0));
+setup(store, opts); // TODO: refactor this awk
 
-store.subscribe(() => {
-  const myst = document.getElementById('myst');
-  const text = document.getElementById('text');
-  const tex = document.getElementById('tex');
-  const html = document.getElementById('html');
-  const editor = store.getState().editor.state.editors[stateKey];
-  if (myst) {
-    try {
-      myst.innerText = toMarkdown(editor.state.doc);
-    } catch (e) {
-      myst.innerText = 'Error converting to markdown';
-    }
-  }
-  if (tex) {
-    try {
-      tex.innerText = toTex(editor.state.doc);
-    } catch (error) {
-      tex.innerText = 'There was an error :(';
-    }
-  }
-  if (text) {
-    try {
-      text.innerText = toText(editor.state.doc);
-    } catch (error) {
-      text.innerText = 'There was an error :(';
-    }
-  }
-  if (html) {
-    html.innerText = toHTML(editor.state.doc, editor.state.schema, document);
-  }
-  // Update the counter
-  const counts = process.countState(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})`,
+function Demo() {
+  const [comments, updateComments] = useState<Comment[]>([]);
+  newCommentFn = () => {
+    const id = v4();
+    store.dispatch(addComment(viewId1, id));
+    updateComments((c) =>
+      c.concat([
+        { id, content: '', color: `#${Math.floor(Math.random() * 16777215).toString(16)}` },
+      ]),
+    );
+  };
+  const removeComment = () => {
+    store.dispatch(actions.removeComment(viewId1, 'sidenote1'));
   };
-  Object.entries(updates).forEach(([key, count]) => {
-    const el = document.getElementById(key);
-    if (el) el.innerText = count;
-  });
-});
+  useEffect(() => {
+    store.dispatch(actions.initEditorState('full', stateKey, true, snippet, 0));
+    store.subscribe(() => {
+      const myst = document.getElementById('myst');
+      const text = document.getElementById('text');
+      const tex = document.getElementById('tex');
+      const html = document.getElementById('html');
+      const editor = store.getState().editor.state.editors[stateKey];
+      if (myst) {
+        try {
+          myst.innerText = toMarkdown(editor.state.doc);
+        } catch (e) {
+          myst.innerText = 'Error converting to markdown';
+        }
+      }
+      if (tex) {
+        try {
+          tex.innerText = toTex(editor.state.doc);
+        } catch (error) {
+          tex.innerText = 'There was an error :(';
+        }
+      }
+      if (text) {
+        try {
+          text.innerText = toText(editor.state.doc);
+        } catch (error) {
+          text.innerText = 'There was an error :(';
+        }
+      }
+      if (html) {
+        html.innerText = toHTML(editor.state.doc, editor.state.schema, document);
+      }
+      // Update the counter
+      const counts = process.countState(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})`,
+      };
+      Object.entries(updates).forEach(([key, count]) => {
+        const el = document.getElementById(key);
+        if (el) el.innerText = count;
+      });
+    });
+  }, []);
 
-ReactDOM.render(
-  <Provider store={store}>
-    <React.StrictMode>
-      <EditorMenu standAlone />
-      <InlineActions>
-        <InlineActionSwitch />
-      </InlineActions>
-      <article id={docId} className="content centered">
-        <AnchorBase anchor="anchor">
-          <div className="selected">
-            <Editor stateKey={stateKey} viewId={viewId1} />
+  return (
+    <Provider store={store}>
+      <React.StrictMode>
+        <EditorMenu standAlone />
+        <InlineActions>
+          <InlineActionSwitch />
+        </InlineActions>
+        <article id={docId} className="content centered">
+          <AnchorBase anchor="anchor">
+            <div className="selected">
+              <Editor stateKey={stateKey} viewId={viewId1} />
+            </div>
+          </AnchorBase>
+          {/* <Editor stateKey={stateKey} viewId="two" /> */}
+          <div className="sidenotes">
+            {comments.map(({ id }) => {
+              return (
+                <Sidenote key={id} sidenote={id} base="anchor">
+                  <div
+                    style={{
+                      border: '1px grey solid',
+                    }}
+                  >
+                    <CommentEditor />
+                  </div>
+                </Sidenote>
+              );
+            })}
           </div>
-        </AnchorBase>
-        {/* <Editor stateKey={stateKey} viewId="two" /> */}
-        <div className="sidenotes">
-          <Sidenote sidenote="sidenote1" base="anchor">
-            <div style={{ width: 280, height: 100, backgroundColor: 'green' }} />
-          </Sidenote>
-          <Sidenote sidenote="sidenote2" base="anchor">
-            <div style={{ width: 280, height: 100, backgroundColor: 'red' }} />
-          </Sidenote>
+        </article>
+        <div className="centered">
+          <p>
+            Select some text to create an inline comment (cmd-opt-m). See
+            <a href="https://curvenote.com"> curvenote.com </a>
+            for full demo.
+          </p>
+          <Button onClick={removeComment}>Remove</Button>
         </div>
-      </article>
-      <div className="centered">
-        <p>
-          Select some text to create an inline comment (cmd-opt-m). See
-          <a href="https://curvenote.com"> curvenote.com </a>
-          for full demo.
-        </p>
-        <Button onClick={newComment}>Comment</Button>
-        <Button onClick={removeComment}>Remove</Button>
-      </div>
-      <Suggestions>
-        <SuggestionSwitch />
-      </Suggestions>
-      <Attributes />
-    </React.StrictMode>
-  </Provider>,
-  document.getElementById('root'),
-);
+        <Suggestions>
+          <SuggestionSwitch />
+        </Suggestions>
+        <Attributes />
+      </React.StrictMode>
+    </Provider>
+  );
+}
+
+window.store = store;
+ReactDOM.render(<Demo />, document.getElementById('root'));

demo/middleware.ts

@@ -1,10 +1,31 @@
 import runtime from '@curvenote/runtime';
 import thunkMiddleware from 'redux-thunk';
-import { middleware } from '../src';
+import { UI_SELECT_SIDENOTE, SelectSidenoteAction } from 'sidenotes/dist/src/store/ui/types';
+import { Middleware, middleware, selectors, actions } from '../src';
 
-export default [
-  thunkMiddleware,
-  ...middleware,
-  runtime.triggerEvaluate,
-  runtime.dangerousEvaluatation,
-];
+const selectComment =
+  (viewId: string): Middleware =>
+  (store) =>
+  (next) =>
+  (action) => {
+    const result = next(action);
+    if (action.type === UI_SELECT_SIDENOTE) {
+      const { view } = selectors.getEditorView(store.getState(), viewId);
+      if (!view) return result;
+      const { sidenoteId } = (action as SelectSidenoteAction).payload;
+      store.dispatch(actions.selectComment(view, sidenoteId));
+    }
+    return result;
+  };
+
+function createMiddleware(viewId: string) {
+  return [
+    thunkMiddleware,
+    ...middleware,
+    selectComment(viewId),
+    runtime.triggerEvaluate,
+    runtime.dangerousEvaluatation,
+  ];
+}
+
+export default createMiddleware;