feat: Add actions in the public editor to facilitate sharing

.eslintignore

@@ -0,0 +1,3 @@
+node_modules/**
+src/plugins/**
+src/ui/**

.eslintrc.json

@@ -1,10 +1,11 @@
 {
   "extends": ["cozy-app/react"],
-  "ignorePatterns": ["src/plugins/**/*.ts", "src/plugins/**/*.tsx", "src/ui/**/*.ts", "src/ui/**/*.tsx"],
   "parserOptions": {
     "project": "tsconfig.json"
   },
-  "globals": {
-    "cozy": "readonly"
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
 }

.prettierrc

@@ -1,4 +1,4 @@
 {
-    "semi": false,
-    "singleQuote": true
+  "semi": false,
+  "singleQuote": true
 }

jsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "components/*": ["./src/components/*"],
+      "lib/*": ["./src/lib/*"],
+      "hooks/*": ["./src/hooks/*"],
+      "config/*": ["./src/config/*"],
+      "constants/*": ["./src/constants/*"],
+      "locales/*": ["./src/locales/*"],
+      "plugins/*": ["./src/plugins/*"],
+      "styles/*": ["./src/styles/*"],
+      "types/*": ["./src/types/*"],
+      "ui/*": ["./src/ui/*"],
+    }
+  },
+  "exclude": ["node_modules", "build"]
+}

package.json

@@ -30,26 +30,39 @@
   },
   "homepage": "https://github.com/cozy/cozy-notes#readme",
   "devDependencies": {
+    "@babel/eslint-parser": "7.23.3",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.4",
     "@testing-library/react-hooks": "8.0.1",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
     "babel-jest": "^27.5.1",
     "babel-preset-cozy-app": "^2.0.2",
     "bundlemon": "3.1.0",
-    "eslint-config-cozy-app": "4.2.1",
-    "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-react": "7.24.0",
+    "cozy-scripts": "^8.3.0",
+    "cozy-tsconfig": "1.2.0",
+    "eslint": "8.56.0",
+    "eslint-config-cozy-app": "6.1.0",
+    "eslint-config-prettier": "8.10.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jest": "27.6.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-promise": "6.1.1",
+    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react-hooks": "4.6.0",
     "git-directory-deploy": "1.5.1",
     "install-peers": "1.0.3",
     "jest": "28.1.3",
     "jest-environment-jsdom": "28.1.3",
-    "prettier": "1.19.1",
+    "prettier": "2.8.8",
     "react-hot-loader": "4.13.1",
     "react-test-renderer": "16.14.0",
     "redux-mock-store": "1.5.4",
-    "stylint": "1.5.9"
+    "stylint": "1.5.9",
+    "typescript": "4.9.5"
   },
   "dependencies": {
+    "@atlaskit/editor-json-transformer": "8.6.5",
     "@atlaskit/icon": "21.1.0",
     "@atlaskit/media-core": "32.2.0",
     "@cozy/minilog": "^1.0.0",
@@ -58,23 +71,24 @@
     "classnames": "2.3.1",
     "cozy-bar": "^16.1.0",
     "cozy-client": "^51.3.0",
-    "cozy-device-helper": "^2.7.0",
+    "cozy-device-helper": "^3.7.0",
     "cozy-devtools": "^1.2.1",
     "cozy-doctypes": "1.86.1",
     "cozy-editor-core": "134.0.3",
     "cozy-flags": "^4.6.1",
-    "cozy-harvest-lib": "^30.0.0",
     "cozy-intent": "^2.29.1",
-    "cozy-interapp": "^0.9.0",
-    "cozy-keys-lib": "^6.0.0",
-    "cozy-logger": "^1.9.0",
-    "cozy-realtime": "4.0.5",
-    "cozy-scripts": "^8.2.0",
-    "cozy-sharing": "^16.0.0",
-    "cozy-stack-client": "^48.16.0",
-    "cozy-ui": "112.0.0",
+    "cozy-interapp": "^0.15.1",
+    "cozy-keys-lib": "^6.2.0",
+    "cozy-logger": "^1.16.1",
+    "cozy-realtime": "^5.6.1",
+    "cozy-sharing": "^16.13.0",
+    "cozy-stack-client": "^51.0.0",
+    "cozy-ui": "113.8.0",
+    "eventemitter2": "4.1.2",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
+    "prosemirror-collab": "1.2.2",
+    "prosemirror-model": "1.11.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-inspector": "5.1.1",

src/components/HeaderNotePath.jsx

@@ -1,14 +1,14 @@
-import React, { useMemo } from 'react'
-
+import { buildFileByIdQuery } from 'lib/queries'
 import { getDriveLink } from 'lib/utils'
+import React, { useMemo } from 'react'
 import { Breakpoints } from 'types/enums'
-import { NotePath } from './notes/List/NotePath'
-import { WithBreakpoints } from './notes/List/WithBreakpoints'
-import { useClient, useQuery } from 'cozy-client'
-import { buildFileByIdQuery } from 'lib/queries'
 
+import { useClient, useQuery } from 'cozy-client'
 import { ensureFilePath } from 'cozy-client/dist/models/file'
 
+import { NotePath } from './notes/List/NotePath'
+import { WithBreakpoints } from './notes/List/WithBreakpoints'
+
 export const HeaderNotePath = ({ file }) => {
   const client = useClient()
   const parentQuery = buildFileByIdQuery(file.dir_id)
@@ -23,10 +23,10 @@ export const HeaderNotePath = ({ file }) => {
     [file, parentResult.data]
   )
 
-  const drivePath = useMemo(() => getDriveLink(client, file.dir_id), [
-    client,
-    file.dir_id
-  ])
+  const drivePath = useMemo(
+    () => getDriveLink(client, file.dir_id),
+    [client, file.dir_id]
+  )
 
   if (fileWithPath) {
     return (

src/components/app.jsx

@@ -1,3 +1,14 @@
+import { AppRoutes } from 'constants/routes'
+import { SHARING_LOCATION } from 'constants/strings'
+
+import * as Sentry from '@sentry/react'
+import { List, Editor, Unshared } from 'components/notes'
+import { NoteProvider } from 'components/notes/NoteProvider'
+import RouteNew from 'components/notes/new-route'
+import { usePreview } from 'hooks/usePreview'
+import { getDataOrDefault } from 'lib/initFromDom'
+import { fetchIfIsNoteReadOnly } from 'lib/utils'
+import { getReturnUrl, getSharedDocument } from 'lib/utils'
 import React, { useEffect, useMemo, useState } from 'react'
 import {
   HashRouter,
@@ -7,33 +18,29 @@ import {
   useNavigate,
   useParams
 } from 'react-router-dom'
-import * as Sentry from '@sentry/react'
 
+import { BarProvider, BarComponent, BarCenter } from 'cozy-bar'
+import { RealTimeQueries, useClient } from 'cozy-client'
 import CozyDevTools from 'cozy-devtools'
 import flag from 'cozy-flags'
-import { BarProvider, BarComponent, BarCenter } from 'cozy-bar'
-import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
+import {
+  ShareModal,
+  useSharingInfos,
+  OpenSharingLinkFabButton
+} from 'cozy-sharing'
 import BarTitle from 'cozy-ui/transpiled/react/BarTitle'
 import IconSprite from 'cozy-ui/transpiled/react/Icon/Sprite'
+import { Layout, Main, Content } from 'cozy-ui/transpiled/react/Layout'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
+import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
+import useClientErrors from 'cozy-ui/transpiled/react/hooks/useClientErrors'
+import AlertProvider from 'cozy-ui/transpiled/react/providers/Alert'
 import useBreakpoints, {
   BreakpointsProvider
 } from 'cozy-ui/transpiled/react/providers/Breakpoints'
-import useClientErrors from 'cozy-ui/transpiled/react/hooks/useClientErrors'
-import { Layout, Main, Content } from 'cozy-ui/transpiled/react/Layout'
-import { ShareModal } from 'cozy-sharing'
-import { RealTimeQueries, useClient } from 'cozy-client'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
-import AlertProvider from 'cozy-ui/transpiled/react/providers/Alert'
 
 const manifest = require('../../manifest.webapp')
-import { AppRoutes } from 'constants/routes'
-import { List, Editor, Unshared } from 'components/notes'
-import { fetchIfIsNoteReadOnly } from 'lib/utils'
-import { getDataOrDefault } from 'lib/initFromDom'
-import { getReturnUrl, getSharedDocument } from 'lib/utils'
-import RouteNew from 'components/notes/new-route'
-import { NoteProvider } from 'components/notes/NoteProvider'
 
 const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes)
 
@@ -76,11 +83,20 @@ const PrivateContext = () => {
   )
 }
 
+const openSharingLinkFabButtonStyle = {
+  bottom: '4.5rem'
+}
 const PublicContext = () => {
   const client = useClient()
+  const { isMobile } = useBreakpoints()
   const [sharedDocumentId, setSharedDocumentId] = useState(null)
   const [readOnly, setReadOnly] = useState(false)
   const returnUrl = useMemo(() => getReturnUrl(), [])
+  const { loading, isSharingShortcutCreated, discoveryLink } =
+    useSharingInfos(SHARING_LOCATION)
+  const isPreview = usePreview(window.location.pathname)
+  const isAddToMyCozyFabDisplayed =
+    isMobile && isPreview && !loading && !isSharingShortcutCreated
 
   useEffect(() => {
     const fetchData = async () => {
@@ -117,6 +133,13 @@ const PublicContext = () => {
           noteId={sharedDocumentId}
           returnUrl={returnUrl}
         />
+        {isAddToMyCozyFabDisplayed && (
+          <OpenSharingLinkFabButton
+            link={discoveryLink}
+            isSharingShortcutCreated={isSharingShortcutCreated}
+            style={openSharingLinkFabButtonStyle}
+          />
+        )}
       </NoteProvider>
     )
   } else if (sharedDocumentId !== null) {
@@ -140,7 +163,7 @@ const App = ({ isPublic }) => {
     <>
       <HashRouter>
         <Layout monoColumn={true}>
-          <BarComponent />
+          <BarComponent isPublic={isPublic} />
           {!isPublic && isMobile && (
             <BarCenter>
               <BarTitle>{appName}</BarTitle>

src/components/header_menu.jsx

@@ -1,19 +1,20 @@
-import React from 'react'
+import { Slugs } from 'constants/strings'
+
+import { useFetchIcons } from 'hooks/useFetchIcons'
 import PropTypes from 'prop-types'
+import React from 'react'
+import { Breakpoints } from 'types/enums'
 
 import { models } from 'cozy-client'
-import AppLinker from 'cozy-ui/transpiled/react/AppLinker'
 import AppIcon from 'cozy-ui/transpiled/react/AppIcon'
+import AppLinker from 'cozy-ui/transpiled/react/AppLinker'
 import Divider from 'cozy-ui/transpiled/react/Divider'
 import Link from 'cozy-ui/transpiled/react/Link'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 
-import { Slugs } from 'constants/strings'
-import { Breakpoints } from 'types/enums'
-import { WithBreakpoints } from './notes/List/WithBreakpoints'
-import styles from './header_menu.styl'
-import { useFetchIcons } from 'hooks/useFetchIcons'
 import { HeaderNotePath } from './HeaderNotePath'
+import styles from './header_menu.styl'
+import { WithBreakpoints } from './notes/List/WithBreakpoints'
 
 /**
  * HeaderMenu component.

src/components/intents/IntentEditorView.jsx

@@ -1,10 +1,9 @@
+import SaveButton from 'components/intents/SaveButton'
+import EditorView from 'components/notes/editor-view'
 import React, { useState } from 'react'
 
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
-import EditorView from 'components/notes/editor-view'
-import SaveButton from 'components/intents/SaveButton'
-
 const IntentEditorView = () => {
   const { t } = useI18n()
   const [title, setTitle] = useState('')

src/components/intents/SaveButton.jsx

@@ -1,15 +1,14 @@
+import { useIntent } from 'components/intents/IntentProvider'
+import useServiceClient from 'hooks/useServiceClient'
+import useUser from 'hooks/useUser'
 import React, { useState } from 'react'
 
-import log from 'cozy-logger'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import log from 'cozy-logger'
 import Buttons from 'cozy-ui/transpiled/react/Buttons'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { makeStyles } from 'cozy-ui/transpiled/react/styles'
 
-import useServiceClient from 'hooks/useServiceClient'
-import useUser from 'hooks/useUser'
-import { useIntent } from 'components/intents/IntentProvider'
-
 const useStyles = makeStyles({
   root: {
     position: 'fixed',