@flozy/editor 1.0.0

package/.eslintignore

@@ -0,0 +1,4 @@
+.storybook/*.js
+.husky
+.vscode
+node_modules

package/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+    "extends": [ "react-app" ],
+    "rules": {
+      "react-hooks/exhaustive-deps": "off"
+    }
+  }

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,33 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: FLOZY APP - EDITOR - Semantic Release
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm ci
+      - run: npm test
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_PUBLISH_TOKEN}}

package/.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

package/.storybook/main.js

@@ -0,0 +1,20 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: ["../public"],
+};
+export default config;

package/.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

package/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+    "recommendations": [
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "mikoz.black-py"
+    ]
+}

package/.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "name": "Chrome",
+        "type": "chrome",
+        "request": "launch",
+        "url": "http://localhost:3000",
+        "webRoot": "${workspaceFolder}/client/src",
+        "sourceMapPathOverrides": {
+          "webpack:///src/*": "${webRoot}/*"
+        }
+      }
+    ]
+  }

package/.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[javascriptreact]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[python]": {
+    "editor.defaultFormatter": "ms-python.black-formatter",
+    "editor.formatOnSave": true
+  },
+  "[markdown]": {
+      "editor.formatOnSave": true,
+      "editor.formatOnPaste": true
+  }
+}

package/README.md

@@ -0,0 +1,2 @@
+# editor
+A brain document editor

package/craco.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  webpack: {
+    configure: {
+      module: {
+        rules: [
+          {
+            test: /\.m?js$/,
+            resolve: {
+              fullySpecified: false,
+            },
+          },
+        ],
+      },
+    },
+  },
+};

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@flozy/editor",
+  "version": "1.0.0",
+  "description": "An Editor for flozy app brain",
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@hocuspocus/provider": "^2.5.0",
+    "@mui/icons-material": "^5.14.3",
+    "@mui/material": "^5.14.1",
+    "@mui/styled-engine-sc": "^5.12.0",
+    "@slate-yjs/core": "^1.0.2",
+    "@slate-yjs/react": "^1.1.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "husky": "^8.0.3",
+    "interweave": "^13.1.0",
+    "lint-staged": "^13.2.3",
+    "prettier": "^3.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.10.1",
+    "react-katex": "^3.0.1",
+    "react-scripts": "5.0.1",
+    "slate": "^0.94.1",
+    "slate-history": "^0.93.0",
+    "slate-react": "^0.98.3",
+    "styled-components": "^5.3.11",
+    "web-vitals": "^2.1.4",
+    "y-websocket": "^1.5.0",
+    "yjs": "^13.6.8"
+  },
+  "scripts": {
+    "prepare": "husky install .husky",
+    "lint": "./node_modules/.bin/eslint --ignore-path .gitignore . --fix",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test --passWithNoTests",
+    "eject": "react-scripts eject",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest",
+      "plugin:storybook/recommended"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx}": [
+      "./node_modules/.bin/eslint --max-warnings=2"
+    ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@craco/craco": "^7.1.0",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-interactions": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.4.0",
+    "@storybook/preset-create-react-app": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-webpack5": "^7.4.0",
+    "@storybook/testing-library": "^0.2.0",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "eslint-plugin-storybook": "^0.6.13",
+    "prop-types": "^15.8.1",
+    "storybook": "^7.4.0",
+    "webpack": "^5.88.2"
+  },
+  "overrides": {
+    "react-refresh": "0.11.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Flozy-App/editor.git"
+  },
+  "keywords": [
+    "flozy-editor",
+    "flozy-brain"
+  ],
+  "author": "tech@agenciflow.com",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Flozy-App/editor/issues"
+  }
+}

package/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>FLOZY APP - Editor</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/src/components/Editor/CollaborativeEditor.js

@@ -0,0 +1,119 @@
+import React, { useEffect, useMemo, useState } from "react";
+import * as Y from "yjs";
+import { HocuspocusProvider } from "@hocuspocus/provider";
+import { Editor, Transforms } from "slate";
+import { YjsEditor } from "@slate-yjs/core";
+import "./Editor.css";
+import { draftToSlate } from "./utils/draftToSlate";
+import withCommon from "./hooks/withCommon";
+import withCollaborative from "./hooks/withCollaborative";
+import CommonEditor from "./CommonEditor";
+
+const CollaborativeEditor = (props) => {
+  const { id, content, onSave, user, socketURL } = props;
+  const convertedContent = draftToSlate({ data: content });
+  const [value] = useState(convertedContent);
+  const [connected, setConnected] = useState(null);
+  const [authenticated, setAuthenticated] = useState({
+    status: null,
+    scope: null,
+  });
+
+  const provider = useMemo(() => {
+    return new HocuspocusProvider({
+      url: socketURL,
+      name: `document-${id}`,
+      connect: false,
+      token: user?.token,
+    });
+  }, []);
+
+  // setup changes for Yjs
+  const editor = useMemo(() => {
+    if (!connected) return null;
+    const sharedType = provider.document.get("content", Y.XmlText);
+    const e = withCommon(
+      withCollaborative({
+        provider,
+        sharedType,
+        data: user,
+      })
+    );
+
+    // Ensure editor always has at least 1 valid child
+    const { normalizeNode } = e;
+    e.normalizeNode = (entry) => {
+      const [node] = entry;
+
+      if (!Editor.isEditor(node) || node.children.length > 0) {
+        return normalizeNode(entry);
+      }
+
+      Transforms.insertNodes(editor, value, { at: [0] });
+    };
+
+    return e;
+  }, [provider.document, provider.awareness, connected]);
+
+  // connect Yjs
+  useEffect(() => {
+    provider.connect();
+    return () => {
+      provider.disconnect(editor);
+    };
+  }, [provider]);
+
+  // connect to editor
+  useEffect(() => {
+    if (editor) {
+      YjsEditor.connect(editor);
+    }
+    return () => {
+      if (editor) {
+        YjsEditor.disconnect(editor);
+      }
+    };
+  }, [editor]);
+
+  provider.on("authenticated", () => {
+    setAuthenticated({
+      status: true,
+      scope: provider.authorizedScope,
+    });
+  });
+
+  provider.on("authenticationFailed", () => {
+    setAuthenticated({
+      status: false,
+      scope: null,
+    });
+  });
+
+  provider.on("synced", () => {
+    setConnected(true);
+  });
+
+  provider.on("disconnect", () => {
+    setConnected(false);
+  });
+
+  provider.on("close", () => {
+    setConnected(false);
+  });
+
+  if (authenticated.status === null || !connected === null || !editor) {
+    return <h1 data-status={connected}>Loading...</h1>;
+  }
+
+  return (
+    <CommonEditor
+      editor={editor}
+      id={id}
+      content={[]}
+      onSave={onSave}
+      readOnly={authenticated.scope}
+    />
+  );
+};
+
+export default CollaborativeEditor;