initial commit

packages/editor/.gitignore

@@ -0,0 +1 @@
+node_modules/

packages/editor/README.md

@@ -0,0 +1 @@
+# notesnook-editor

packages/editor/hooks/useTiptap.ts

@@ -0,0 +1,24 @@
+import CharacterCount from "@tiptap/extension-character-count";
+import Placeholder from "@tiptap/extension-placeholder";
+import { EditorOptions, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+
+export const useTiptap = (options: Partial<EditorOptions> = {}, deps?: any) => {
+  let defaultOptions: Partial<EditorOptions> = {
+    extensions: [
+      StarterKit,
+      CharacterCount,
+      Placeholder.configure({
+        placeholder: "Start writing your note...",
+      }),
+    ],
+  };
+
+  const editor = useEditor({ ...defaultOptions, ...options }, deps);
+
+  /**
+   * Add editor to global for use in React Native.
+   */
+  global.editor = editor;
+  return editor;
+};

packages/editor/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "notesnook-editor",
+  "version": "0.0.1",
+  "private": true,
+  "main": "./",
+  "dependencies": {
+    "@tiptap/extension-history": "^2.0.0-beta.21",
+    "@tiptap/extension-character-count": "^2.0.0-beta.24",
+    "@tiptap/extension-placeholder": "^2.0.0-beta.45",
+    "@tiptap/react": "^2.0.0-beta.98",
+    "@tiptap/starter-kit": "^2.0.0-beta.150"
+  },
+  "devDependencies": {
+    "@types/node": "^16.11.11",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "typescript": "^4.5.2",
+    "web-vitals": "^1.1.2"
+  },
+  "scripts": {
+    "build": "react-scripts build"
+  }
+}

packages/editor/todo

@@ -0,0 +1,14 @@
+1. Editor    
+    a. Wrap Tiptap in useTiptap hook -> done
+    b. Create useEditorController hook -> done
+    c. Expose required events to app via post -> done
+
+2. App
+    a. Refactor Functions.js to a hook or a class possibly.
+    b. Implement basic editing
+        1. Save & load content
+        2. Save & load title
+        3. Update status bar in Editor
+        4. Attach toolbar commands & events
+        5. Show selected text formats in toolbar
+        

packages/editor/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "tiptap editor",
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "esnext",
+    "target": "es5",
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "outDir": "dist"
+  },
+  "include": ["src", "hooks", "utils"]
+}

packages/editor/utils/index.ts

@@ -0,0 +1,8 @@
+import { Editor } from "@tiptap/react";
+
+declare global {
+  /**
+   * Current tiptap instance
+   */
+  var editor: Editor | null;
+}