Add support for links, wysiwyg style (#45)

- add create link via pasting over selected text - add hovering links menus for viewing, updating, and clearing existing links - add inspect element on aux click (for debugging) - add more AST viewing tools to the editor (for debugging)
cloverich · Sep 18, 2021 · 7298199 · 7298199
1 parent e43bac5
commit 7298199
Show file tree

Hide file tree

Showing 13 changed files with 1,004 additions and 438 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -4,9 +4,17 @@ import Container from "./container";
 import "./app.css";
 import "./typography.css";
 import { listenLinks } from "./utils.electron";
+import { remote } from 'electron';
 
 listenLinks();
 
+// Gives me a quick inspect element for debugging. 
+// todo: When I re-productionize the app, make this a debug only
+// handler
+window.onauxclick = (e) => {
+  remote.getCurrentWindow().webContents.inspectElement(e.x, e.y)
+}
+
 ReactDOM.render(
   <div>
     <Container />

diff --git a/src/views/editor/EditDocument.tsx b/src/views/editor/EditDocument.tsx
@@ -20,12 +20,13 @@ function EditDocument(props: Props) {
     loading: loadingDoc,
     loadingErr: loadingDocErr,
     docState,
+    initialState,
   } = useEditableDocument(props.documentId);
 
   const { journals, loading: loadingJournals, loadingErr: loadingJournalsErr } = useJournals()
   const loading = loadingDoc || loadingJournals
   const loadingErr = loadingDocErr || loadingJournalsErr
-  const [showAST, setShowAST] = React.useState<boolean>(false);
+  const [showAST, setShowAST] = React.useState<'original' | 'current' | null>(null);
 
 
   function renderError() {
@@ -46,9 +47,11 @@ function EditDocument(props: Props) {
     return journal ? journal.name : 'Unknown journal';
   }
 
-  function showASTOrEditor(showAST: boolean) {
-    if (showAST) {
+  function showASTOrEditor(showAST: 'original' | 'current' | null) {
+    if (showAST === 'current') {
       return <ASTExplorer slateNodes={slateContent} />
+    } else if (showAST === 'original') {
+      return <OriginalASTExplorer initialState={initialState} />
     } else {
       return <Editor saving={docState?.saving || loading} value={slateContent} setValue={setEditorValue} />
     }
@@ -65,9 +68,9 @@ function EditDocument(props: Props) {
         onChange={(e: any) => docState!.title = e.target.value}
         value={docState && docState.title || ''}
         />
-      <Button onClick={() => setShowAST(!showAST)}>Toggle AST</Button>
+      <Button onClick={() => setShowAST(showAST ? null : 'current')}>Toggle AST</Button>
+      <Button onClick={() => setShowAST(showAST ? null : 'original')}>Toggle Original AST</Button>
       <p style={{fontSize: '0.8rem', fontWeight: 'bold'}}>/{getName(docState?.journalId)}</p>
-
       {showASTOrEditor(showAST)}
       <Button onClick={save} disabled={!isDirty} isLoading={docState?.saving || loading}>Save</Button>
     </Pane>
@@ -96,4 +99,14 @@ const ASTExplorer = (p: ASTProps) => {
       <pre style={{overflow: 'auto', border: '1px solid blue'}}>{slateToMdast(p.slateNodes)}</pre>
     </div>
   )
+}
+
+const OriginalASTExplorer = ({ initialState } : any) => {
+  return (
+    <div style={{display: 'flex', flexBasis: 100, flex: 1}}>
+      <pre style={{overflow: 'auto', border: '1px solid blue'}}>{initialState.raw}</pre>
+      <pre style={{overflow: 'auto', border: '1px solid blue'}}>{JSON.stringify(initialState.mdast, null, 2)}</pre>
+      <pre style={{overflow: 'auto', border: '1px solid blue'}}>{JSON.stringify(initialState.slate, null, 2)}</pre>
+    </div>
+  )
 }
diff --git a/src/views/editor/blocks/images.tsx b/src/views/editor/blocks/images.tsx
@@ -0,0 +1,149 @@
+
+import unified from "unified";
+import markdown from "remark-parse";
+import remarkGfm from 'remark-gfm'
+import { remarkToSlate, slateToRemark, mdastToSlate } from "remark-slate-transformer";
+const parser = unified().use(markdown).use(remarkGfm as any)
+
+function isImageUrl(url: string) {
+  if (!url) return false;
+
+  const mdast = parser.parse(url)
+  console.log(mdast);
+  console.log(mdastToSlate(mdast as any)) // expects Root, parser returns "Node" (its actually a root in my case)
+}
+
+
+// const isImageUrl = url => {
+//   if (!url) return false
+//   if (!isUrl(url)) return false
+//   const ext = new URL(url).pathname.split('.').pop()
+//   return imageExtensions.includes(ext)
+// }
+// https://cdn.shopify.com/s/files/1/3106/5828/products/IMG_9385_1024x1024@2x.jpg?v=1577795595
+// const imageExtensionRegex =
+
+// Copied from this repo: https://github.com/arthurvr/image-extensions
+// Which is an npm package that is just a json file 
+const imageExtensions = [
+	"ase",
+	"art",
+	"bmp",
+	"blp",
+	"cd5",
+	"cit",
+	"cpt",
+	"cr2",
+	"cut",
+	"dds",
+	"dib",
+	"djvu",
+	"egt",
+	"exif",
+	"gif",
+	"gpl",
+	"grf",
+	"icns",
+	"ico",
+	"iff",
+	"jng",
+	"jpeg",
+	"jpg",
+	"jfif",
+	"jp2",
+	"jps",
+	"lbm",
+	"max",
+	"miff",
+	"mng",
+	"msp",
+	"nitf",
+	"ota",
+	"pbm",
+	"pc1",
+	"pc2",
+	"pc3",
+	"pcf",
+	"pcx",
+	"pdn",
+	"pgm",
+	"PI1",
+	"PI2",
+	"PI3",
+	"pict",
+	"pct",
+	"pnm",
+	"pns",
+	"ppm",
+	"psb",
+	"psd",
+	"pdd",
+	"psp",
+	"px",
+	"pxm",
+	"pxr",
+	"qfx",
+	"raw",
+	"rle",
+	"sct",
+	"sgi",
+	"rgb",
+	"int",
+	"bw",
+	"tga",
+	"tiff",
+	"tif",
+	"vtf",
+	"xbm",
+	"xcf",
+	"xpm",
+	"3dv",
+	"amf",
+	"ai",
+	"awg",
+	"cgm",
+	"cdr",
+	"cmx",
+	"dxf",
+	"e2d",
+	"egt",
+	"eps",
+	"fs",
+	"gbr",
+	"odg",
+	"svg",
+	"stl",
+	"vrml",
+	"x3d",
+	"sxd",
+	"v2d",
+	"vnd",
+	"wmf",
+	"emf",
+	"art",
+	"xar",
+	"png",
+	"webp",
+	"jxr",
+	"hdp",
+	"wdp",
+	"cur",
+	"ecw",
+	"iff",
+	"lbm",
+	"liff",
+	"nrrd",
+	"pam",
+	"pcx",
+	"pgf",
+	"sgi",
+	"rgb",
+	"rgba",
+	"bw",
+	"int",
+	"inta",
+	"sid",
+	"ras",
+	"sun",
+	"tga"
+]