diff --git a/packages/next.js/.env.example b/packages/next.js/.env.example
new file mode 100644
index 000000000..e3754a217
--- /dev/null
+++ b/packages/next.js/.env.example
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_PROVIDER_URL='ws://localhost:2300/collaboration'
+NEXT_PUBLIC_RESTAPI_URL='http://localhost:2300/api'
diff --git a/packages/next.js/.gitignore b/packages/next.js/.gitignore
new file mode 100644
index 000000000..d435dcd9e
--- /dev/null
+++ b/packages/next.js/.gitignore
@@ -0,0 +1,48 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env*.production
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# next-pwa
+/public/precache.*.*.js
+/public/sw.js
+/public/workbox-*.js
+/public/worker-*.js
+/public/fallback-*.js
+/public/precache.*.*.js.map
+/public/sw.js.map
+/public/workbox-*.js.map
+/public/worker-*.js.map
+/public/fallback-*.js
diff --git a/packages/next.js/README.md b/packages/next.js/README.md
new file mode 100644
index 000000000..c2c18f499
--- /dev/null
+++ b/packages/next.js/README.md
@@ -0,0 +1,23 @@
+# Progressive Web App Example
+
+This example uses [`next-pwa`](https://github.com/shadowwalker/next-pwa) to create a progressive web app (PWA) powered by [Workbox](https://developers.google.com/web/tools/workbox/).
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app&project-name=progressive-web-app&repository-name=progressive-web-app)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+
+```bash
+npx create-next-app --example progressive-web-app progressive-web-app
+# or
+yarn create next-app --example progressive-web-app progressive-web-app
+# or
+pnpm create next-app --example progressive-web-app progressive-web-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/packages/next.js/components/Button.jsx b/packages/next.js/components/Button.jsx
new file mode 100644
index 000000000..a5a5cd915
--- /dev/null
+++ b/packages/next.js/components/Button.jsx
@@ -0,0 +1,21 @@
+const Button = ({ children, style, onClick: click, loading, className }) => {
+ return (
+
+ {loading
+ ? <>
+
+
+ Processing...
+
+ : children}
+
+ )
+}
+
+export default Button
diff --git a/packages/next.js/components/Counter.jsx b/packages/next.js/components/Counter.jsx
new file mode 100644
index 000000000..8ae47ae5e
--- /dev/null
+++ b/packages/next.js/components/Counter.jsx
@@ -0,0 +1,37 @@
+
+import { useEffect, useRef, useState } from 'react'
+
+const Counter = ({ seconds, callback, stopTimer }) => {
+ const [timeLeft, setTimeLeft] = useState(+seconds)
+ const intervalRef = useRef()
+
+ useEffect(() => {
+ intervalRef.current = setInterval(() => {
+ setTimeLeft((t) => t - 1)
+ }, 1000)
+
+ return () => {
+ console.log('aklsdlaks;dlk close')
+ clearInterval(intervalRef.current)
+ }
+ }, [])
+
+ // useEffect(() => {
+ // console.log("stopTimer changed", stopTimer)
+ // }, [stopTimer])
+
+ useEffect(() => {
+ if (timeLeft <= 0) {
+ clearInterval(intervalRef.current)
+ if (callback) callback()
+ }
+ }, [timeLeft])
+
+ return (
+ <>
+ {timeLeft}s
+
+ )
+}
+
+export default Counter
diff --git a/packages/next.js/components/ReloadPrompt.jsx b/packages/next.js/components/ReloadPrompt.jsx
new file mode 100644
index 000000000..3bc7563c8
--- /dev/null
+++ b/packages/next.js/components/ReloadPrompt.jsx
@@ -0,0 +1,98 @@
+import React, { useState, useEffect } from 'react'
+import Counter from './Counter'
+const intervalMS = 1000 * 60 // 1min
+
+const PwaUpdater = () => {
+ const wb = window?.workbox
+
+ const [isOpen, setIsOpen] = useState(false);
+ const onConfirmActivate = () => wb.messageSkipWaiting();
+
+
+ if (typeof window !== 'undefined' && 'serviceWorker' in navigator && window.workbox !== undefined) {
+
+ useEffect(() => {
+
+ console.log("ReloadPrompt", wb)
+ // add event listeners to handle any of PWA lifecycle event
+ // https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-window.Workbox#events
+ wb.addEventListener('installed', event => {
+ console.log(`Event ${event.type} is triggered.`)
+ console.log(event)
+ })
+
+ wb.addEventListener('controlling', event => {
+ console.log(`Event ${event.type} is triggered.`)
+ console.log(event)
+ window.location.reload();
+ })
+
+ wb.addEventListener('activated', event => {
+ console.log(`Event ${event.type} is triggered.`)
+ console.log(event)
+ })
+
+ // A common UX pattern for progressive web apps is to show a banner when a service worker has updated and waiting to install.
+ // NOTE: MUST set skipWaiting to false in next.config.js pwa object
+ // https://developers.google.com/web/tools/workbox/guides/advanced-recipes#offer_a_page_reload_for_users
+ const promptNewVersionAvailable = event => {
+ console.log("promptNewVersionAvailable", event)
+ // `event.wasWaitingBeforeRegister` will be false if this is the first time the updated service worker is waiting.
+ // When `event.wasWaitingBeforeRegister` is true, a previously updated service worker is still waiting.
+ // You may want to customize the UI prompt accordingly.
+ if (confirm('A newer version of this web app is available, reload to update?')) {
+ wb.addEventListener('controlling', event => {
+ // window.location.reload()
+ console.log("new version is available")
+ })
+
+ // Send a message to the waiting service worker, instructing it to activate.
+ // wb.messageSkipWaiting()
+ } else {
+ console.log(
+ 'User rejected to reload the web app, keep using old version. New version will be automatically load when user open the app next time.'
+ )
+ }
+ }
+
+ // wb.addEventListener('waiting', promptNewVersionAvailable)
+ wb.addEventListener('waiting', () => setIsOpen(true));
+ wb.register();
+
+ // ISSUE - this is not working as expected, why?
+ // I could only make message event listenser work when I manually add this listenser into sw.js file
+ wb.addEventListener('message', event => {
+ console.log(`Event ${event.type} is triggered.`)
+ console.log(event)
+ })
+
+ }, []);
+
+ }
+
+
+ return (
+
+
+ Hey, a new version is available! Please click below to update.
+
+
+
+ Reload and update
+
+ setIsOpen(false)}
+ >
+ Cancel
+
+
+
+
+ {showStatus && (
+
+ {isOnline
+ ?
+
+ :
+ }
+
+ )}
+
+
+
+
+ {isLoading
+ ? 'Loading...'
+ :
{
+ if (event.key === 'Enter') {
+ e.preventDefault()
+ e.target.blur()
+ }
+ }}
+ >
+
}
+
+
+
+
+ toggleSection(item)}>
+
+ {item.text}
+
+
+
+ {children.length > 0 &&
{renderToc(children)}
}
+
+
+ {renderToc(items)}
+
+
+ {props.children}
+
+ )
+}
+
+const Toolbar = ({ editor }) => {
+ if (!editor) {
+ return null
+ }
+
+ const setLink = useCallback(() => {
+ const previousUrl = editor.getAttributes('link').href
+ const url = window.prompt('URL', previousUrl)
+
+ if (editor.isActive('link')) {
+ return editor.chain().focus().unsetLink().run()
+ }
+
+ // cancelled
+ if (url === null) {
+ return
+ }
+
+ // empty
+ if (url === '') {
+ editor.chain().focus().extendMarkRange('link').unsetLink().run()
+
+ return
+ }
+
+ // update link
+ editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+ }, [editor])
+
+ const addImage = useCallback(() => {
+ const url = window.prompt('URL')
+
+ if (url) {
+ editor.chain().focus().setImage({ src: url }).run()
+ }
+ }, [editor])
+
+ const options = [
+ { value: 0, label: 'Normal Text' },
+ { value: 1, label: 'Heading 1' },
+ { value: 2, label: 'Heading 2' },
+ { value: 3, label: 'Heading 3' },
+ { value: 4, label: 'Heading 4' },
+ { value: 5, label: 'Heading 5' },
+ { value: 6, label: 'Heading 6' },
+ { value: 7, label: 'Heading 7' },
+ { value: 8, label: 'Heading 8' },
+ { value: 9, label: 'Heading 9' },
+ { value: 10, label: 'Heading 10' }
+ ]
+
+ const [selectedOption, setSelectedOption] = useState(options[0])
+ const [selectValue, setSelectValue] = useState(options[0])
+
+ useEffect(() => {
+ if (editor.isActive('contentHeading', { level: 1 })) setSelectValue(options[1])
+ else if (editor.isActive('contentHeading', { level: 2 })) setSelectValue(options[2])
+ else if (editor.isActive('contentHeading', { level: 3 })) setSelectValue(options[3])
+ else if (editor.isActive('contentHeading', { level: 4 })) setSelectValue(options[4])
+ else if (editor.isActive('contentHeading', { level: 5 })) setSelectValue(options[5])
+ else if (editor.isActive('contentHeading', { level: 6 })) setSelectValue(options[6])
+ else if (editor.isActive('contentHeading', { level: 7 })) setSelectValue(options[7])
+ else if (editor.isActive('contentHeading', { level: 8 })) setSelectValue(options[8])
+ else if (editor.isActive('contentHeading', { level: 9 })) setSelectValue(options[9])
+ else if (editor.isActive('contentHeading', { level: 10 })) setSelectValue(options[10])
+ else setSelectValue(options[0])
+ }, [
+ editor.isActive('contentHeading', { level: 1 }),
+ editor.isActive('contentHeading', { level: 2 }),
+ editor.isActive('contentHeading', { level: 3 }),
+ editor.isActive('contentHeading', { level: 4 }),
+ editor.isActive('contentHeading', { level: 5 }),
+ editor.isActive('contentHeading', { level: 6 }),
+ editor.isActive('contentHeading', { level: 7 }),
+ editor.isActive('contentHeading', { level: 8 }),
+ editor.isActive('contentHeading', { level: 9 }),
+ editor.isActive('contentHeading', { level: 10 }),
+ editor.isActive('paragraph')
+ ])
+
+ const onchangeValue = (e) => {
+ setSelectedOption(e)
+ const value = e.value
+
+ if (value === 0) editor.chain().focus().normalText().run()
+ else editor.chain().focus().wrapBlock({ level: +value }).run()
+ }
+
+ let indentSetting = Boolean(localStorage.getItem('setting.indentHeading') || false)
+ let h1SectionBreakSetting = Boolean(localStorage.getItem('setting.h1SectionBreakSetting') || false)
+
+ if (!indentSetting) {
+ localStorage.setItem('setting.indentHeading', '')
+ indentSetting = false
+ }
+
+ if (!h1SectionBreakSetting) {
+ console.log('indentSetting', indentSetting)
+ localStorage.setItem('setting.h1SectionBreakSetting', 'true')
+ h1SectionBreakSetting = true
+ document.body.classList.add('h1SectionBreak')
+ }
+
+ const [indented, setIndented] = React.useState(indentSetting)
+ const [h1SectionBreak, setH1SectionBreak] = React.useState(h1SectionBreakSetting)
+
+ const toggleHeadingIndent = (e) => {
+ setIndented(preState => {
+ const newState = !preState
+
+ if (newState) { document.body.classList.add('indentHeading') } else { document.body.classList.remove('indentHeading') }
+
+ localStorage.setItem('setting.indentHeading', newState ? 'yes' : '')
+
+ return newState
+ })
+ }
+
+ const toggleH1SectionBreak = (e) => {
+ setH1SectionBreak(preState => {
+ const newState = !preState
+
+ if (newState) { document.body.classList.add('h1SectionBreak') } else { document.body.classList.remove('h1SectionBreak') }
+
+ localStorage.setItem('setting.h1SectionBreakSetting', newState ? 'yes' : '')
+
+ return newState
+ })
+ }
+
+ const toggleSettingModal = () => {
+ console.log('toggleSettingModal')
+ document.querySelector('.gearModal').classList.toggle('active')
+ }
+
+ const hideModals = (e) => {
+ console.log()
+ if (e.target.closest('.btn_modal') || e.target.closest('.nd_modal')) return
+ document.querySelector('.gearModal').classList.remove('active')
+ }
+
+ useEffect(() => {
+ const newIndent = Boolean(localStorage.getItem('setting.indentHeading'))
+ const newHsectionBreak = Boolean(localStorage.getItem('setting.indentHeading'))
+
+ if (newIndent) document.body.classList.add('indentHeading')
+ else document.body.classList.remove('indentHeading')
+
+ if (newHsectionBreak) document.body.classList.add('h1SectionBreak')
+ else document.body.classList.remove('h1SectionBreak')
+ }, [])
+
+ return (
+
+
+
+
editor.chain().focus().undo().run()}>
+
+
editor.chain().focus().redo().run()}>
+
+
window.print()}>
+
+
+
+
+
+
+
+
+
editor.chain().focus().toggleBold().run()}
+ >
+
+
+
editor.chain().focus().toggleItalic().run()}
+ >
+
+
+
editor.chain().focus().toggleUnderline().run()}
+ >
+
+
+
+ editor.chain().focus().toggleStrike().run()}
+ >
+
+
+
+
+
+
+
editor.chain().focus().toggleOrderedList().run()}
+ >
+
+
+
editor.chain().focus().toggleBulletList().run()}
+ >
+
+
+
+
+ editor.chain().focus().toggleTaskList().run()}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ editor.chain().focus().toggleHighlight().run()}
+ >
+
+
+
+
+
+
+
+ {
+ const range = editor.view.state.selection.ranges[0]
+
+ if (range.$from === range.$to) {
+ editor.chain().focus().clearNodes().run()
+ } else {
+ editor.chain().focus().unsetAllMarks().run()
+ }
+ }}>
+
+
+
+
+
+
+
+
+ Settings:
+
+
+
+ Toggle heading indent
+
+
+
+
+ Toggle H1 section break
+
+
+
+
')
+
+ return true
+ }
+
+ // INFO: 1 mean start of the next line
+ const nextLine = end + 1
+
+ return editor.chain()
+ .insertContentAt(nextLine, '
')
+ .scrollIntoView()
+ .run()
+ }
+ }
+ },
+ addProseMirrorPlugins () {
+ return [
+ // https://github.com/pageboard/pagecut/blob/bd91a17986978d560cc78642e442655f4e09ce06/src/editor.js#L234-L241
+ new Plugin({
+ key: new PluginKey('copy&pasteHeading'),
+ props: {
+ // INFO: Div turn confuses the schema service;
+ // INFO:if there is a div in the clipboard, the docsplus schema will not serialize as a must.
+ transformPastedHTML: (html, event) => html.replace(/div/g, 'span'),
+ transformPasted: (slice) => clipboardPast(slice, this.editor),
+ transformCopied: (slice, view) => {
+ // Can be used to transform copied or cut content before it is serialized to the clipboard.
+ const { selection, doc } = this.editor.state
+ const { from, to } = selection
+
+ // TODO: this function retrive blocks level from the selection, I need to block characters level from the selection
+ const contentWrapper = getSelectionBlocks(doc.cut(from, to), null, null, true, true)
+
+ // convert Json Block to Node Block
+ let serializeSelection = contentWrapper
+ .map(x => this.editor.state.schema.nodeFromJSON(x))
+
+ // convert Node Block to Fragment
+ serializeSelection = Fragment.fromArray(serializeSelection)
+
+ // convert Fragment to Slice and save it to clipboard
+ return Slice.maxOpen(serializeSelection)
+ }
+ }
+ })
+ ]
+ }
+})
+
+export { Blockquote, Blockquote as default }
diff --git a/packages/next.js/components/TipTap/extentions/UniqueId.jsx b/packages/next.js/components/TipTap/extentions/UniqueId.jsx
new file mode 100644
index 000000000..ebf3ada26
--- /dev/null
+++ b/packages/next.js/components/TipTap/extentions/UniqueId.jsx
@@ -0,0 +1,254 @@
+import { Extension, findChildren, combineTransactionSteps, getChangedRanges, findChildrenInRange } from '@tiptap/core'
+import { Plugin, PluginKey } from 'prosemirror-state'
+import { Slice, Fragment } from 'prosemirror-model'
+import { v4 } from 'uuid'
+
+/**
+ * Removes duplicated values within an array.
+ * Supports numbers, strings and objects.
+ */
+function removeDuplicates (array, by = JSON.stringify) {
+ const seen = {}
+
+ return array.filter(item => {
+ const key = by(item)
+
+ return Object.prototype.hasOwnProperty.call(seen, key)
+ ? false
+ : (seen[key] = true)
+ })
+}
+
+/**
+ * Returns a list of duplicated items within an array.
+ */
+function findDuplicates (items) {
+ const filtered = items.filter((el, index) => items.indexOf(el) !== index)
+ const duplicates = removeDuplicates(filtered)
+
+ return duplicates
+}
+
+const UniqueID = Extension.create({
+ name: 'uniqueID',
+ // we’ll set a very high priority to make sure this runs first
+ // and is compatible with `appendTransaction` hooks of other extensions
+ priority: 10000,
+ addOptions () {
+ return {
+ attributeName: 'id',
+ types: [],
+ generateID: () => v4(),
+ filterTransaction: null
+ }
+ },
+ addGlobalAttributes () {
+ return [
+ {
+ types: this.options.types,
+ attributes: {
+ [this.options.attributeName]: {
+ default: null,
+ parseHTML: element => element.getAttribute(`data-${this.options.attributeName}`),
+ renderHTML: attributes => {
+ if (!attributes[this.options.attributeName]) {
+ return {}
+ }
+
+ return {
+ [`data-${this.options.attributeName}`]: attributes[this.options.attributeName]
+ }
+ }
+ }
+ }
+ }
+ ]
+ },
+ // check initial content for missing ids
+ onCreate () {
+ // Don’t do this when the collaboration extension is active
+ // because this may update the content, so Y.js tries to merge these changes.
+ // This leads to empty block nodes.
+ // See: https://github.com/ueberdosis/tiptap/issues/2400
+ // console.log(this.editor.extensionManager.extensions.filter(x => x.type === 'extension'))
+ if (this.editor.extensionManager.extensions.find(extension => extension.name === 'collaboration')) {
+ return
+ }
+ console.log('once update========>>>>')
+ const { view, state } = this.editor
+ const { tr, doc } = state
+ const { types, attributeName, generateID } = this.options
+ const nodesWithoutId = findChildren(doc, node => {
+ return types.includes(node.type.name) &&
+ node.attrs[attributeName] === null
+ })
+
+ nodesWithoutId.forEach(({ node, pos }) => {
+ tr.setNodeMarkup(pos, undefined, {
+ ...node.attrs,
+ [attributeName]: generateID()
+ })
+ })
+ tr.setMeta('addToHistory', false)
+ view.dispatch(tr)
+ },
+ addProseMirrorPlugins () {
+ let dragSourceElement = null
+ let transformPasted = false
+
+ return [
+ new Plugin({
+ key: new PluginKey('uniqueID'),
+ appendTransaction: (transactions, oldState, newState) => {
+ const docChanges = transactions.some(transaction => transaction.docChanged) &&
+ !oldState.doc.eq(newState.doc)
+ const filterTransactions = this.options.filterTransaction &&
+ transactions.some(tr => {
+ let _a, _b
+
+ return !((_b = (_a = this.options).filterTransaction) === null || _b === void 0 ? void 0 : _b.call(_a, tr))
+ })
+
+ if (!docChanges || filterTransactions) {
+ return
+ }
+ const { tr } = newState
+ const { types, attributeName, generateID } = this.options
+ const transform = combineTransactionSteps(oldState.doc, transactions)
+ const { mapping } = transform
+
+ // get changed ranges based on the old state
+ const changes = getChangedRanges(transform)
+
+ changes.forEach(({ newRange }) => {
+ const newNodes = findChildrenInRange(newState.doc, newRange, node => {
+ return types.includes(node.type.name)
+ })
+ const newIds = newNodes
+ .map(({ node }) => node.attrs[attributeName])
+ .filter(id => id !== null)
+ const duplicatedNewIds = findDuplicates(newIds)
+
+ newNodes.forEach(({ node, pos }) => {
+ let _a
+ // instead of checking `node.attrs[attributeName]` directly
+ // we look at the current state of the node within `tr.doc`.
+ // this helps to prevent adding new ids to the same node
+ // if the node changed multiple times within one transaction
+ const id = (_a = tr.doc.nodeAt(pos)) === null || _a === void 0 ? void 0 : _a.attrs[attributeName]
+
+ if (id === null) {
+ tr.setNodeMarkup(pos, undefined, {
+ ...node.attrs,
+ [attributeName]: generateID()
+ })
+
+ return
+ }
+ // check if the node doesn’t exist in the old state
+ const { deleted } = mapping.invert().mapResult(pos)
+ const newNode = deleted && duplicatedNewIds.includes(id)
+
+ if (newNode) {
+ tr.setNodeMarkup(pos, undefined, {
+ ...node.attrs,
+ [attributeName]: generateID()
+ })
+ }
+ })
+ })
+ if (!tr.steps.length) {
+ return
+ }
+
+ return tr
+ },
+ // we register a global drag handler to track the current drag source element
+ view (view) {
+ const handleDragstart = (event) => {
+ let _a
+
+ dragSourceElement = ((_a = view.dom.parentElement) === null || _a === void 0 ? void 0 : _a.contains(event.target))
+ ? view.dom.parentElement
+ : null
+ }
+
+ window.addEventListener('dragstart', handleDragstart)
+
+ return {
+ destroy () {
+ window.removeEventListener('dragstart', handleDragstart)
+ }
+ }
+ },
+ props: {
+ // `handleDOMEvents` is called before `transformPasted`
+ // so we can do some checks before
+ handleDOMEvents: {
+ // only create new ids for dropped content while holding `alt`
+ // or content is dragged from another editor
+ drop: (view, event) => {
+ let _a
+
+ if (dragSourceElement !== view.dom.parentElement ||
+ ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.effectAllowed) === 'copy') {
+ dragSourceElement = null
+ transformPasted = true
+ }
+
+ return false
+ },
+ // always create new ids on pasted content
+ paste: () => {
+ transformPasted = true
+
+ return false
+ }
+ },
+ // we’ll remove ids for every pasted node
+ // so we can create a new one within `appendTransaction`
+ transformPasted: slice => {
+ if (!transformPasted) {
+ return slice
+ }
+ const { types, attributeName } = this.options
+ const removeId = (fragment) => {
+ const list = []
+
+ fragment.forEach(node => {
+ // don’t touch text nodes
+ if (node.isText) {
+ list.push(node)
+
+ return
+ }
+ // check for any other child nodes
+ if (!types.includes(node.type.name)) {
+ list.push(node.copy(removeId(node.content)))
+
+ return
+ }
+ // remove id
+ const nodeWithoutId = node.type.create({
+ ...node.attrs,
+ [attributeName]: null
+ }, removeId(node.content), node.marks)
+
+ list.push(nodeWithoutId)
+ })
+
+ return Fragment.from(list)
+ }
+
+ // reset check
+ transformPasted = false
+
+ return new Slice(removeId(slice.content), slice.openStart, slice.openEnd)
+ }
+ }
+ })
+ ]
+ }
+})
+
+export { UniqueID, UniqueID as default }
diff --git a/packages/next.js/components/TipTap/extentions/changeHeading2paragraphs.js b/packages/next.js/components/TipTap/extentions/changeHeading2paragraphs.js
new file mode 100644
index 000000000..4f75a0fe2
--- /dev/null
+++ b/packages/next.js/components/TipTap/extentions/changeHeading2paragraphs.js
@@ -0,0 +1,18 @@
+import onHeading from './normalText/onHeading'
+import onSelection from './normalText/onSelection'
+
+export default (arrg) => {
+ const { state } = arrg
+ const { selection } = state
+ const { $anchor, $head } = selection
+
+ if ($anchor.pos === $head.pos) {
+ console.info('[Heading], normalText on Heading block')
+
+ return onHeading(arrg)
+ } else {
+ console.info('[Heading], normalText on selection')
+
+ return onSelection(arrg)
+ }
+}
diff --git a/packages/next.js/components/TipTap/extentions/changeHeadingLevel-backward.js b/packages/next.js/components/TipTap/extentions/changeHeadingLevel-backward.js
new file mode 100644
index 000000000..26f7bc283
--- /dev/null
+++ b/packages/next.js/components/TipTap/extentions/changeHeadingLevel-backward.js
@@ -0,0 +1,70 @@
+import { TextSelection } from 'prosemirror-state'
+
+import { getRangeBlocks, getHeadingsBlocksMap, createThisBlockMap } from './helper'
+
+export default (arrg, attributes, asWrapper = false) => {
+ const { can, chain, commands, dispatch, editor, state, tr, view } = arrg
+ const { schema, selection, doc } = state
+ const { $from, $to, $anchor, $cursor, from } = selection
+ const { start, end, depth } = $from.blockRange($to)
+
+ console.log('[Heading]: Backward process, comingLevel < currentHLevel')
+
+ const comingLevel = attributes.level
+ const caretSelectionTextBlock = { type: 'text', text: doc?.nodeAt($anchor.pos)?.text || $anchor.nodeBefore?.text || ' ' }
+
+ const block = createThisBlockMap($from, depth, caretSelectionTextBlock)
+ const titleNode = $from.doc.nodeAt($from.start(1) - 1)
+ const titleStartPos = $from.start(1) - 1
+ const titleEndPos = titleStartPos + titleNode.content.size
+ const contentWrapper = getRangeBlocks(doc, start, titleEndPos)
+ const titleHMap = getHeadingsBlocksMap(doc, start, titleEndPos)
+
+ const sliceTargetContent = contentWrapper.filter(x => {
+ if (x.type !== 'heading') return x
+
+ return x.le > comingLevel
+ })
+
+ // remove the first paragraph, if the request is to wrap the content
+ if (asWrapper) {
+ const pickedNode = sliceTargetContent.shift()
+
+ if (sliceTargetContent.length === 0) {
+ sliceTargetContent.push({ ...pickedNode, content: [block.paragraph] })
+ }
+ }
+
+ const endSliceBlocPos = sliceTargetContent[sliceTargetContent.length - 1].endBlockPos
+ const insertPos = titleHMap
+ .filter(x => endSliceBlocPos <= x.endBlockPos)
+ .find(x => x.le >= comingLevel)?.endBlockPos
+
+ const jsonNewBlock = {
+ type: 'heading',
+ content: [
+ {
+ type: 'contentHeading',
+ content: [block.headingContent],
+ attrs: {
+ level: attributes.level
+ }
+ },
+ {
+ type: 'contentWrapper',
+ content: sliceTargetContent
+ }
+ ]
+ }
+
+ const node = state.schema.nodeFromJSON(jsonNewBlock)
+
+ const newTr = tr.insert(insertPos, node)
+
+ const newTextSelection = new TextSelection(newTr.doc.resolve(from))
+
+ newTr.setSelection(newTextSelection)
+ newTr.deleteRange(start - 1, insertPos)
+
+ return true
+}
diff --git a/packages/next.js/components/TipTap/extentions/changeHeadingLevel-forward.js b/packages/next.js/components/TipTap/extentions/changeHeadingLevel-forward.js
new file mode 100644
index 000000000..5a14157af
--- /dev/null
+++ b/packages/next.js/components/TipTap/extentions/changeHeadingLevel-forward.js
@@ -0,0 +1,110 @@
+import { TextSelection } from 'prosemirror-state'
+
+import { getRangeBlocks, getHeadingsBlocksMap, createThisBlockMap, getPrevHeadingList, getPrevHeadingPos } from './helper'
+
+export default (arrg, attributes) => {
+ const { can, chain, commands, dispatch, editor, state, tr, view } = arrg
+ const { schema, selection, doc } = state
+ const { $from, $to, $anchor, $cursor, $head, from } = selection
+ const { start, end, depth } = $from.blockRange($to)
+
+ console.log('[Heading]: change heading level forwarding')
+
+ const commingLevel = attributes.level
+ const caretSelectionTextBlock = { type: 'text', text: doc?.nodeAt($anchor.pos)?.text || $anchor.nodeBefore?.text || ' ' }
+
+ const block = createThisBlockMap($from, depth, caretSelectionTextBlock)
+ const titleNode = $from.doc.nodeAt($from.start(1) - 1)
+ const titleStartPos = $from.start(1) - 1
+ const titleEndPos = titleStartPos + titleNode.content.size
+ const contentWrapper = getRangeBlocks(doc, start, titleEndPos)
+ const titleHMap = getHeadingsBlocksMap(doc, titleStartPos, titleEndPos)
+
+ const contentWrapperParagraphs = contentWrapper.filter(x => x.type !== 'heading')
+ const contentWrapperHeadings = contentWrapper.filter(x => x.type === 'heading')
+
+ const { prevHStartPos, prevHEndPos } = getPrevHeadingPos(doc, titleStartPos, start - 1)
+
+ let mapHPost = titleHMap.filter(x =>
+ x.startBlockPos < start - 1 &&
+ x.startBlockPos >= prevHStartPos
+ )
+
+ let shouldNested = false
+
+ // let prevBlock = mapHPost.find(x => x.le >= commingLevel)
+ // FIXME: this is heavy! I need to find better solotion with less loop
+ const prevBlockEqual = mapHPost.findLast(x => x.le === commingLevel)
+ const prevBlockGratherFromFirst = mapHPost.find(x => x.le >= commingLevel)
+ const prevBlockGratherFromLast = mapHPost.findLast(x => x.le <= commingLevel)
+ const lastBlock = mapHPost.at(-1)
+ let prevBlock = prevBlockEqual || prevBlockGratherFromLast || prevBlockGratherFromFirst
+
+ if (lastBlock?.le <= commingLevel) prevBlock = lastBlock
+ if (!prevBlock) prevBlock = lastBlock
+ shouldNested = prevBlock.le < commingLevel
+
+ if (prevBlock.le === 1) shouldNested = false
+
+ const jsonNode = {
+ type: 'heading',
+ content: [
+ {
+ type: 'contentHeading',
+ content: [block.headingContent],
+ attrs: {
+ level: attributes.level
+ }
+ },
+ {
+ type: 'contentWrapper',
+ content: contentWrapperParagraphs
+ }
+ ]
+ }
+
+ const node = state.schema.nodeFromJSON(jsonNode)
+
+ // remove content from the current positon to the end of the heading
+ tr.delete(start - 1, titleEndPos)
+ // then add the new heading with the content
+ const insertPos = (contentWrapperHeadings.length === 0 ? prevBlock.endBlockPos : start - 1) - (shouldNested ? 2 : 0)
+
+ tr.insert(tr.mapping.map(insertPos), node)
+
+ // set the cursor to the end of the heading
+ const newSelection = new TextSelection(tr.doc.resolve(from))
+
+ tr.setSelection(newSelection)
+
+ // after all that, we need to loop through the heading to append
+ for (const heading of contentWrapperHeadings) {
+ const commingLevel = heading.le
+
+ mapHPost = getPrevHeadingList(
+ tr,
+ mapHPost.at(0).startBlockPos,
+ tr.mapping.map(mapHPost.at(0).endBlockPos)
+ )
+
+ mapHPost = mapHPost.filter(x =>
+ x.startBlockPos < heading.startBlockPos &&
+ x.startBlockPos >= prevHStartPos
+ )
+
+ const prevBlockEqual = mapHPost.findLast(x => x.le === commingLevel)
+ const prevBlockGratherFromFirst = mapHPost.find(x => x.le >= commingLevel)
+ const prevBlockGratherFromLast = mapHPost.findLast(x => x.le <= commingLevel)
+ const lastBlock = mapHPost.at(-1)
+
+ prevBlock = prevBlockEqual || prevBlockGratherFromLast || prevBlockGratherFromFirst
+ if (lastBlock.le <= commingLevel) prevBlock = lastBlock
+ shouldNested = prevBlock.le < commingLevel
+
+ const node = state.schema.nodeFromJSON(heading)
+
+ tr.insert(prevBlock.endBlockPos - (shouldNested ? 2 : 0), node)
+ }
+
+ return true
+}
diff --git a/packages/next.js/components/TipTap/extentions/changeHeadingLevel-h1.js b/packages/next.js/components/TipTap/extentions/changeHeadingLevel-h1.js
new file mode 100644
index 000000000..d4c4be94d
--- /dev/null
+++ b/packages/next.js/components/TipTap/extentions/changeHeadingLevel-h1.js
@@ -0,0 +1,118 @@
+import { TextSelection } from 'prosemirror-state'
+
+import { getPrevHeadingList, createThisBlockMap, getHeadingsBlocksMap, getRangeBlocks, getPrevHeadingPos } from './helper'
+
+export default (arrg, attributes) => {
+ const { can, chain, commands, dispatch, editor, state, tr, view } = arrg
+ const { schema, selection, doc } = state
+ const { $from, $to, $anchor, $cursor, from } = selection
+ const { start, end, depth } = $from.blockRange($to)
+
+ console.log('[Heading]: change heading Level h1')
+
+ const commingLevel = attributes.level
+ const caretSelectionTextBlock = { type: 'text', text: doc?.nodeAt($anchor.pos)?.text || $anchor.nodeBefore?.text || ' ' }
+
+ const block = createThisBlockMap($from, depth, caretSelectionTextBlock)
+ const currentHLevel = $from.doc.nodeAt(block.start).attrs.level
+
+ let titleStartPos = 0
+ let titleEndPos = 0
+
+ doc.nodesBetween($from.start(0), start - 1, function (node, pos, parent, index) {
+ if (node.type.name === 'heading') {
+ const headingLevel = node.firstChild?.attrs?.level
+
+ if (headingLevel === currentHLevel) {
+ titleStartPos = pos
+ // INFO: I need the pos of last content in contentWrapper
+ titleEndPos = pos + node.content.size
+ }
+ }
+ })
+
+ const contentWrapper = getRangeBlocks(doc, start, $from.start(1) - 1 + $from.doc.nodeAt($from.start(1) - 1).content.size)
+ const titleHMap = getHeadingsBlocksMap(doc, titleStartPos, titleEndPos)
+
+ const contentWrapperParagraphs = contentWrapper.filter(x => x.type !== 'heading')
+ const contentWrapperHeadings = contentWrapper.filter(x => x.type === 'heading')
+
+ const { prevHStartPos, prevHEndPos } = getPrevHeadingPos(doc, titleStartPos, start - 1)
+
+
+ let mapHPost = titleHMap.filter(x =>
+ x.startBlockPos < start - 1 &&
+ x.startBlockPos >= prevHStartPos
+ )
+
+ let shouldNested = false
+
+ // FIXME: this is heavy! I need to find better solotion with less loop
+ const prevBlockEqual = mapHPost.findLast(x => x.le === commingLevel)
+ const prevBlockGratherFromFirst = mapHPost.find(x => x.le >= commingLevel)
+ const prevBlockGratherFromLast = mapHPost.findLast(x => x.le <= commingLevel)
+ const lastbloc = mapHPost.at(-1)
+ let prevBlock = prevBlockEqual || prevBlockGratherFromLast || prevBlockGratherFromFirst
+
+ if (lastbloc.le <= commingLevel) prevBlock = lastbloc
+ shouldNested = prevBlock.le < commingLevel
+
+ const jsonNode = {
+ type: 'heading',
+ content: [
+ {
+ type: 'contentHeading',
+ content: [block.headingContent],
+ attrs: {
+ level: attributes.level
+ }
+ },
+ {
+ type: 'contentWrapper',
+ content: contentWrapperParagraphs
+ }
+ ]
+ }
+ const node = state.schema.nodeFromJSON(jsonNode)
+
+ // remove content from the current positon to the end of the heading
+ tr.delete(start - 1, $from.start(1) - 1 + $from.doc.nodeAt($from.start(1) - 1).content.size)
+
+ // then add the new heading with the content
+ const insertPos = prevBlock.endBlockPos - (shouldNested ? 2 : 0)
+
+ tr.insert(tr.mapping.map(insertPos), node)
+
+ // set the cursor to the end of the heading
+ const newSelection = new TextSelection(tr.doc.resolve(from))
+
+ tr.setSelection(newSelection)
+
+ // FIXME: this loop so much heavy, I need to find better solotion!
+ // then loop through the heading to append
+ for (const heading of contentWrapperHeadings) {
+ mapHPost = getPrevHeadingList(
+ tr,
+ mapHPost.at(0).startBlockPos,
+ mapHPost.at(0).startBlockPos + doc.nodeAt(mapHPost.at(0).startBlockPos).nodeSize + 2
+ )
+
+ mapHPost = mapHPost.filter(x =>
+ x.startBlockPos < heading.startBlockPos &&
+ x.startBlockPos >= prevHStartPos
+ )
+
+ const node = state.schema.nodeFromJSON(heading)
+
+ const prevBlockEqual = mapHPost.findLast(x => x.le === heading.le)
+ const prevBlockGratherFromFirst = mapHPost.find(x => x.le >= heading.le)
+ const prevBlockGratherFromLast = mapHPost.findLast(x => x.le <= heading.le)
+ const lastbloc = mapHPost.at(-1)
+ let prevBlock = prevBlockEqual || prevBlockGratherFromLast || prevBlockGratherFromFirst
+
+ if (lastbloc.le <= heading.le) prevBlock = lastbloc
+ shouldNested = prevBlock.le < heading.le
+
+ tr.insert(prevBlock.endBlockPos - (shouldNested ? 2 : 0), node)
+ }
+}
diff --git a/packages/next.js/components/TipTap/extentions/changeHeadingLevel.js b/packages/next.js/components/TipTap/extentions/changeHeadingLevel.js
new file mode 100644
index 000000000..2933700fd
--- /dev/null
+++ b/packages/next.js/components/TipTap/extentions/changeHeadingLevel.js
@@ -0,0 +1,36 @@
+import changeHeadingLevelBackward from './changeHeadingLevel-backward'
+import changeHeadingLevelForward from './changeHeadingLevel-forward'
+import changeHeadingLevelForwardH1 from './changeHeadingLevel-h1'
+
+export default (arrg, attributes) => {
+ const { can, chain, commands, dispatch, editor, state, tr, view } = arrg
+ const { schema, selection, doc } = state
+ const { $from, $to, $anchor, $cursor } = selection
+ const { start, end, depth } = $from.blockRange($to)
+
+ const commingLevel = attributes.level
+ const currentHLevel = $from.doc.nodeAt(start).attrs.level
+
+ if (commingLevel === currentHLevel) {
+ console.log('[heading]: commingLevel === nextSiblingLevel')
+
+ return true
+ }
+
+ // H1
+ if (currentHLevel === 1) {
+ return changeHeadingLevelForwardH1(arrg, attributes)
+ }
+
+ // H2 > H3 || H4 > H3
+ if (commingLevel > currentHLevel) {
+ return changeHeadingLevelForward(arrg, attributes)
+ }
+
+ // H2 < H3 || H4 < H3
+ if (commingLevel < currentHLevel) {
+ return changeHeadingLevelBackward(arrg, attributes)
+ }
+
+ return true
+}
diff --git a/packages/next.js/components/TipTap/extentions/clipboardPast.js b/packages/next.js/components/TipTap/extentions/clipboardPast.js
new file mode 100644
index 000000000..8bc59b859
--- /dev/null
+++ b/packages/next.js/components/TipTap/extentions/clipboardPast.js
@@ -0,0 +1,213 @@
+import { Slice, Fragment, NodeRange, NodeType, Mark, ContentMatch } from 'prosemirror-model'
+import { TextSelection, Selection } from 'prosemirror-state'
+
+import { getRangeBlocks, getHeadingsBlocksMap } from './helper'
+
+const normalizeClipboardContents = (clipboardContents, editor) => {
+ const paragraphs = []
+ const headings = []
+ let heading = null
+
+ for (const node of clipboardContents) {
+ if (!heading && node.type !== 'contentHeading') {
+ paragraphs.push(editor.schema.nodeFromJSON(node))
+ }
+
+ if (node.type === 'contentHeading') {
+ // if new heading is found, push the previous heading into the heading list
+ // and reset the heading
+ if (heading) {
+ headings.push(editor.schema.nodeFromJSON(heading))
+ heading = null
+ }
+ heading = {
+ type: 'heading',
+ attrs: { level: node?.attrs.level },
+ content: [
+ node,
+ {
+ type: 'contentWrapper',
+ content: []
+ }
+ ]
+ }
+ } else {
+ heading?.content.at(1).content.push(node)
+ }
+ }
+
+ if (heading) {
+ headings.push(editor.schema.nodeFromJSON(heading))
+ }
+
+ return [paragraphs, headings]
+}
+
+export default (slice, editor) => {
+ const { state, view } = editor
+ const { schema, selection, doc, tr } = state
+ const { from, to, $anchor } = selection
+
+ let newPosResolver
+ let $from = selection.$from
+ let start = $from.pos
+
+ // if user cursor is in the heading,
+ // move the cursor to the contentWrapper and do the rest
+ if ($from.parent.type.name === 'contentHeading') {
+ const firstLine = doc.nodeAt(start + 2)
+
+ let resolveNextBlock = tr.doc.resolve(start + 2)
+
+ newPosResolver = resolveNextBlock
+
+ // if the heading block does not contain contentWrapper as a first child
+ // then create a contentWrapper block
+ if (firstLine.type.name === 'heading') {
+ const contentWrapperBlock = {
+ type: 'contentWrapper',
+ content: [
+ {
+ type: 'paragraph'
+ }
+ ]
+
+ }
+
+ const node = state.schema.nodeFromJSON(contentWrapperBlock)
+
+ tr.insert(start, node)
+ resolveNextBlock = tr.doc.resolve(start + 2)
+ }
+
+ // put the selection to the first line of contentWrapper block
+ if (resolveNextBlock.parent.type.name === 'contentWrapper') {
+ tr.setSelection(TextSelection.near(resolveNextBlock))
+ }
+ }
+
+ // If caret selection move to contentWrapper, create a new selection
+ if (newPosResolver) {
+ $from = (new Selection(
+ newPosResolver,
+ newPosResolver
+ )).$from
+ }
+
+ start = $from.pos
+
+ // return Slice.empty
+
+ const titleNode = $from.doc.nodeAt($from.start(1) - 1)
+ let titleStartPos = $from.start(1) - 1
+ let titleEndPos = titleStartPos + titleNode.content.size
+ const contentWrapper = getRangeBlocks(doc, start, titleEndPos)
+
+ let prevHStartPos = 0
+ let prevHEndPos = 0
+
+ doc.nodesBetween(titleStartPos, start - 1, function (node, pos, parent, index) {
+ if (node.type.name === 'heading') {
+ const depth = doc.resolve(pos).depth
+
+ // INFO: this the trick I've looking for
+ if (depth === 2) {
+ prevHStartPos = pos
+ prevHEndPos = pos + node.content.size
+ }
+ }
+ })
+
+ const clipboardContentJson = slice.toJSON().content
+
+ const [paragraphs, headings] = normalizeClipboardContents(clipboardContentJson, state)
+
+ // if there is no heading block, then just return
+ if (headings.length <= 0) return slice
+
+ // return Slice.empty
+ let shouldNested = false
+
+ tr.delete(to, titleEndPos)
+
+ if (paragraphs.length !== 0) {
+ // first append the paragraphs in the current selection
+ tr.replaceWith(tr.mapping.map(from), tr.mapping.map(from), paragraphs)
+
+ const newSelection = new TextSelection(tr.doc.resolve(selection.from))
+
+ tr.setSelection(newSelection)
+ }
+
+ let lastBlockPos = paragraphs.length === 0 ? start : tr.mapping.map(start)
+
+ const headingContent = contentWrapper.filter(x => x.type === 'heading')
+
+ if (headingContent.length > 0) {
+ headingContent.forEach(heading => headings.push(state.schema.nodeFromJSON(heading)))
+ }
+
+ let mapHPost = {}
+ // return Slice.empty
+
+ const lastH1Inserted = {
+ startBlockPos: 0,
+ endBlockPos: 0,
+ }
+
+ // paste the headings
+ for (const heading of headings) {
+ const comingLevel = heading.content.firstChild.attrs.level
+
+ const startBlock = lastH1Inserted.startBlockPos === 0 ? tr.mapping.map(start) : lastH1Inserted.startBlockPos
+ const endBlock = lastH1Inserted.endBlockPos === 0 ? tr.mapping.map(titleEndPos) : tr.doc.nodeAt(lastH1Inserted.startBlockPos).content.size + lastH1Inserted.startBlockPos
+
+ if (lastH1Inserted.startBlockPos !== 0) {
+ lastH1Inserted.startBlockPos = 0
+ lastH1Inserted.endBlockPos = 0
+ }
+
+ mapHPost = getHeadingsBlocksMap(tr.doc, startBlock, endBlock)
+
+ mapHPost = mapHPost.filter(x =>
+ x.startBlockPos >= (comingLevel === 1 ? titleStartPos : prevHStartPos)
+ )
+
+ const prevBlockEqual = mapHPost.findLast(x => x.le === comingLevel)
+ const prevBlockGratherFromFirst = mapHPost.find(x => x.le >= comingLevel)
+ const prevBlockGratherFromLast = mapHPost.findLast(x => x.le <= comingLevel)
+
+ const lastBlock = mapHPost.at(-1)
+ let prevBlock = prevBlockEqual || prevBlockGratherFromLast || prevBlockGratherFromFirst
+
+ if (!prevBlock) prevBlock = lastBlock
+
+ if (lastBlock.le <= comingLevel) prevBlock = lastBlock
+
+ shouldNested = prevBlock.le < comingLevel
+
+ // find prevBlock.le in mapHPost
+ const robob = mapHPost.filter(x => prevBlock.le === x.le)
+
+ if (robob.length > 1) {
+ prevBlock = robob.at(-1)
+ }
+
+ lastBlockPos = prevBlock.endBlockPos
+
+ if (prevBlock && prevBlock.depth === 2) {
+ prevHStartPos = prevBlock.startBlockPos
+ }
+
+ tr.insert(lastBlockPos - (shouldNested ? 2 : 0), heading)
+
+ if (comingLevel === 1) {
+ lastH1Inserted.startBlockPos = lastBlockPos
+ lastH1Inserted.endBlockPos = tr.mapping.map(lastBlockPos + heading.content.size)
+ }
+ }
+ tr.setMeta('paste', true)
+ view.dispatch(tr)
+
+ return Slice.empty
+}
diff --git a/packages/next.js/components/TipTap/extentions/crinkle.event.js b/packages/next.js/components/TipTap/extentions/crinkle.event.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/next.js/components/TipTap/extentions/helper.js b/packages/next.js/components/TipTap/extentions/helper.js
new file mode 100644
index 000000000..1500eed40
--- /dev/null
+++ b/packages/next.js/components/TipTap/extentions/helper.js
@@ -0,0 +1,239 @@
+import { Slice, Fragment, NodeRange, NodeType, Mark, ContentMatch } from 'prosemirror-model'
+
+/**
+ *
+ * @param {Object} tr transform object
+ * @param {Number} start start pos
+ * @param {Number} from end pos
+ * @returns
+ */
+export const getPrevHeadingList = (tr, start, from) => {
+ const titleHMap = []
+
+ if (from < start) throw new Error("[Heading]: position is invalid 'from < start'")
+ try {
+ tr.doc.nodesBetween(start, from, function (node, pos, parent, index) {
+ if (node.type.name === 'heading') {
+ const headingLevel = node.firstChild?.attrs?.level
+ const depth = tr.doc.resolve(pos).depth
+
+ titleHMap.push({
+ le: headingLevel,
+ node: node.toJSON(),
+ depth,
+ startBlockPos: pos,
+ endBlockPos: pos + node.nodeSize
+ })
+ }
+ })
+ } catch (error) {
+ console.error('[Heading]: getPrevHeadingList', error, { tr, start, from })
+ // return Slice.empty
+ } finally {
+ return titleHMap
+ }
+}
+
+/**
+ *
+ * @param {Object} doc prosemirror doc
+ * @param {Number} start start pos
+ * @param {Number} end end pos
+ * @returns Array of Selection Block
+ */
+export const getSelectionBlocks = (doc, start, end, includeContentHeading = false, range = false) => {
+ const firstHEading = true
+ const prevDepth = 0
+ const selectedContents = []
+
+ if (range) {
+ console.log(doc)
+ doc.descendants(function (node, pos, parent) {
+ if (firstHEading && node.type.name !== 'heading' && parent.type.name === 'contentWrapper') {
+ const depth = doc.resolve(pos).depth
+
+ selectedContents.push({ depth, startBlockPos: pos, endBlockPos: pos + node.nodeSize, ...node.toJSON() })
+ }
+
+ if (node.type.name === 'contentHeading') {
+ const depth = doc.resolve(pos).depth
+
+ selectedContents.push({
+ depth,
+ level: node.attrs?.level,
+ attrs: includeContentHeading ? node.attrs : {},
+ startBlockPos: pos,
+ endBlockPos: pos + node.nodeSize,
+ type: includeContentHeading ? node.type.name : 'paragraph',
+ content: node.toJSON().content
+ })
+ }
+ })
+
+ return selectedContents
+ }
+
+ doc.nodesBetween(start, end, function (node, pos, parent, index) {
+ if (pos < start) return
+
+ if (firstHEading && node.type.name !== 'heading' && parent.type.name === 'contentWrapper') {
+ const depth = doc.resolve(pos).depth
+
+ selectedContents.push({ depth, startBlockPos: pos, endBlockPos: pos + node.nodeSize, ...node.toJSON() })
+ }
+
+ if (node.type.name === 'contentHeading') {
+ const depth = doc.resolve(pos).depth
+
+ selectedContents.push({
+ depth,
+ level: node.attrs?.level,
+ attrs: includeContentHeading ? node.attrs : {},
+ startBlockPos: pos,
+ endBlockPos: pos + node.nodeSize,
+ type: includeContentHeading ? node.type.name : 'paragraph',
+ content: node.toJSON().content
+ })
+ }
+ })
+
+ return selectedContents
+}
+
+/**
+ *
+ * @param {Object} doc prosemirror doc
+ * @param {Number} start start pos
+ * @param {Number} end end pos
+ * @returns Array of Selection Block
+ */
+export const getRangeBlocks = (doc, start, end) => {
+ let firstHEading = true
+ let prevDepth = 0
+ const selectedContents = []
+
+ doc.nodesBetween(start, end, function (node, pos, parent, index) {
+ if (pos < start) return
+
+ if (firstHEading && node.type.name !== 'heading' && parent.type.name === 'contentWrapper') {
+ const depth = doc.resolve(pos).depth
+
+ selectedContents.push({ depth, startBlockPos: pos, endBlockPos: pos + node.nodeSize, ...node.toJSON() })
+ }
+ if (node.type.name === 'heading') {
+ firstHEading = false
+ const headingLevel = node.firstChild?.attrs?.level
+ const depth = doc.resolve(pos).depth
+
+ if (prevDepth === 0) prevDepth = depth
+
+ if (prevDepth >= depth) {
+ selectedContents.push({ le: headingLevel, depth, startBlockPos: pos, endBlockPos: pos + node.nodeSize, ...node.toJSON() })
+ prevDepth = depth
+ }
+ }
+ })
+
+ return selectedContents
+}
+
+/**
+ * Returns a map of headings and the blocks that fall under them
+ *
+ * @param {Object} doc
+ * @param {number} start
+ * @param {number} end
+ * @returns {Map}
+ */
+export const getHeadingsBlocksMap = (doc, start, end) => {
+ const titleHMap = []
+
+ doc.nodesBetween(start, end, function (node, pos, parent, index) {
+ if (node.type.name === 'heading') {
+ const headingLevel = node.firstChild?.attrs?.level
+ const depth = doc.resolve(pos).depth
+
+ titleHMap.push({ le: headingLevel, depth, startBlockPos: pos, endBlockPos: pos + node.nodeSize, index })
+ }
+ })
+
+ return titleHMap
+}
+
+/**
+ * Creates a block map of the editor state.
+ * @param {Object} $from - The current selection's start position in the editor state.
+ * @param {number} depth - The current selection's depth.
+ * @param {Object} caretSelectionTextBlock - The current selection's text block.
+ * @returns {Object} blockMap - The current selection's block map.
+ */
+
+export const createThisBlockMap = ($from, depth, caretSelectionTextBlock = ' ') => {
+ return {
+ parent: {
+ end: $from.end(depth - 1),
+ start: $from.start(depth - 1)
+ },
+ edge: {
+ end: $from.end(depth - 1) + 1,
+ start: $from.start(depth - 1) - 1
+ },
+ ancesster: {
+ start: $from.start(1),
+ end: $from.end(1)
+ },
+ end: $from.end(depth),
+ start: $from.start(depth),
+ nextLevel: 0,
+ depth,
+ headingContent: caretSelectionTextBlock,
+ empty: {
+ type: 'paragraph',
+ content: [
+ {
+ type: 'text',
+ text: ' '
+ }
+ ]
+ },
+ paragraph: { type: 'paragraph' }
+ }
+}
+
+/**
+ * This method copies a text to clipboard
+ * @param {string} text - the text to copy
+ * @param {function} callback - a callback to execute after the text is copied
+ */
+export const copyToClipboard = (text, callback) => {
+ navigator.clipboard.writeText(text).then(() => {
+ alert('Copied to clipboard')
+ if (callback) callback()
+ })
+}
+
+export const getNodeState = (headingId) => {
+ const headingMap = JSON.parse(localStorage.getItem('headingMap')) || []
+ const nodeState = headingMap.find(h => h.headingId === headingId) || { crinkleOpen: true }
+
+ return nodeState
+}
+
+export const getPrevHeadingPos = (doc, startPos, endPos) => {
+ let prevHStartPos = 0
+ let prevHEndPos = 0
+
+ doc.nodesBetween(startPos, endPos, function (node, pos, parent, index) {
+ if (node.type.name === 'heading') {
+ const depth = doc.resolve(pos).depth
+
+ // INFO: this the trick I've looking for
+ if (depth === 2) {
+ prevHStartPos = pos
+ prevHEndPos = pos + node.content.size
+ }
+ }
+ })
+
+ return { prevHStartPos, prevHEndPos }
+}
diff --git a/packages/next.js/components/TipTap/extentions/normalText/onHeading.js b/packages/next.js/components/TipTap/extentions/normalText/onHeading.js
new file mode 100644
index 000000000..d110d2e7c
--- /dev/null
+++ b/packages/next.js/components/TipTap/extentions/normalText/onHeading.js
@@ -0,0 +1,115 @@
+import { TextSelection } from 'prosemirror-state'
+
+import { getRangeBlocks, getPrevHeadingList } from '../helper'
+
+export default (arrg) => {
+ const { can, chain, commands, dispatch, editor, state, tr, view } = arrg
+ const { schema, selection, doc } = state
+ const { $from, $to, $anchor, $cursor, $head, from } = selection
+ const { start, end, depth } = $from.blockRange($to)
+
+ if (doc?.nodeAt(start).type.name !== 'contentHeading') {
+ return console.info('[Heading]: not heading')
+ }
+
+ const headingText = { type: 'text', text: doc?.nodeAt($anchor.pos)?.text || $anchor.nodeBefore?.text || ' ' }
+
+ const titleNode = $from.doc.nodeAt($from.start(1) - 1)
+ let titleStartPos = $from.start(1) - 1
+ let titleEndPos = titleStartPos + titleNode.content.size
+ const contentWrapper = getRangeBlocks(doc, start, titleEndPos)
+ const currentHLevel = $from.parent.attrs.level
+
+ let prevHStartPos = 0
+ let prevHEndPos = 0
+
+ const backspaceAction = doc.nodeAt(from) === null && $anchor.parentOffset === 0
+
+ tr.delete(backspaceAction ? start - 1 : start - 1, titleEndPos)
+
+ // if the current heading is not H1, otherwise we need to find the previous H1
+ if (currentHLevel !== 1) {
+ doc.nodesBetween(titleStartPos, start - 1, function (node, pos, parent, index) {
+ if (node.type.name === 'heading') {
+ const depth = doc.resolve(pos).depth
+
+ // INFO: this the trick I've looking for
+ if (depth === 2) {
+ prevHStartPos = pos
+ prevHEndPos = pos + node.content.size
+ }
+ }
+ })
+ } else {
+ doc.nodesBetween($from.start(0), start - 1, function (node, pos, parent, index) {
+ if (node.type.name === 'heading') {
+ const headingLevel = node.firstChild?.attrs?.level
+
+ if (headingLevel === currentHLevel) {
+ titleStartPos = pos
+ titleEndPos = pos + node.content.size
+ }
+ }
+ })
+ }
+
+ const contentWrapperParagraphs = contentWrapper.filter(x => x.type !== 'heading')
+ const contentWrapperHeadings = contentWrapper.filter(x => x.type === 'heading')
+ const normalContents = [headingText, ...contentWrapperParagraphs]
+ .map(x => editor.schema.nodeFromJSON(x))
+
+ // this is for backspace, if the node is empty remove the TextNode
+ if (backspaceAction) normalContents.shift()
+
+ const titleHMap = getPrevHeadingList(tr, titleStartPos, tr.mapping.map(titleEndPos))
+
+ let mapHPost = titleHMap.filter(x =>
+ x.startBlockPos < start - 1 &&
+ x.startBlockPos >= prevHStartPos
+ )
+
+ let shouldNested = false
+
+ const comingLevel = mapHPost.at(-1).le + 1
+
+ const prevBlockEqual = mapHPost.findLast(x => x.le === comingLevel)
+ const prevBlockGratherFromFirst = mapHPost.find(x => x.le >= comingLevel)
+ const prevBlockGratherFromLast = mapHPost.findLast(x => x.le <= comingLevel)
+ const lastbloc = mapHPost.at(-1)
+ let prevBlock = prevBlockEqual || prevBlockGratherFromLast || prevBlockGratherFromFirst
+
+ if (lastbloc.le <= comingLevel) prevBlock = lastbloc
+ shouldNested = prevBlock.le < comingLevel
+
+ const insertPos = prevBlock.endBlockPos - (shouldNested ? 2 : 0)
+
+ tr.insert(tr.mapping.map(insertPos), normalContents)
+
+ const focusSelection = new TextSelection(tr.doc.resolve(insertPos + 1))
+
+ tr.setSelection(focusSelection)
+
+ for (let heading of contentWrapperHeadings) {
+ if (!heading.le) heading = { ...heading, le: heading.content[0].attrs.level, startBlockPos: 0 }
+
+ const startBlock = mapHPost[0].startBlockPos
+ const endBlock = tr.mapping.map(mapHPost.at(0).endBlockPos)
+
+ mapHPost = getPrevHeadingList(tr, startBlock, endBlock)
+
+ const node = state.schema.nodeFromJSON(heading)
+
+ const prevBlockEqual = mapHPost.findLast(x => x.le === heading.le)
+ const prevBlockGratherFromFirst = mapHPost.find(x => x.le >= heading.le)
+ const prevBlockGratherFromLast = mapHPost.findLast(x => x.le <= heading.le)
+ const lastbloc = mapHPost[mapHPost.length - 1]
+ let prevBlock = prevBlockEqual || prevBlockGratherFromLast || prevBlockGratherFromFirst
+
+ if (lastbloc.le <= heading.le) prevBlock = lastbloc
+ shouldNested = prevBlock.le < heading.le
+
+ tr.insert(prevBlock.endBlockPos - (shouldNested ? 2 : 0), node)
+ }
+
+ return (backspaceAction) ? view.dispatch(tr) : true
+}
diff --git a/packages/next.js/components/TipTap/extentions/normalText/onSelection.js b/packages/next.js/components/TipTap/extentions/normalText/onSelection.js
new file mode 100644
index 000000000..b084c458d
--- /dev/null
+++ b/packages/next.js/components/TipTap/extentions/normalText/onSelection.js
@@ -0,0 +1,94 @@
+import { TextSelection } from 'prosemirror-state'
+
+import { getSelectionBlocks, getRangeBlocks, getPrevHeadingList } from '../helper'
+
+export default (arrg) => {
+ const { can, chain, commands, dispatch, editor, state, tr, view } = arrg
+ const { schema, selection, doc } = state
+ const { $from, $to, $anchor, $cursor, $head, from, to } = selection
+ const { start, end, depth } = $from.blockRange($to)
+
+ const currentHLevel = $from.parent.attrs.level
+ const titleNode = $from.doc.nodeAt($from.start(1) - 1)
+ let titleStartPos = $from.start(1) - 1
+ let titleEndPos = titleStartPos + titleNode.content.size
+ const prevHStartPos = 0
+ const prevHEndPos = 0
+
+ const selectionFirstLinePos = $from.pos - $from.parentOffset
+
+ const selectedContents = getSelectionBlocks(doc, selectionFirstLinePos - 1, to)
+ const lastHeadingInSelection = selectedContents.findLast(x => x.hasOwnProperty('attrs'))
+ const lastHeadingIndex = selectedContents.findLastIndex(x => x.hasOwnProperty('attrs'))
+
+ // on selection we have Heading level 1
+ if (titleEndPos < to) {
+ const getTitleBlock = selectedContents.findLast(x => x.level === 1)
+
+ titleEndPos = (getTitleBlock.startBlockPos + doc.nodeAt(getTitleBlock.startBlockPos - 1).nodeSize) - 1
+ }
+
+ // select rest of contents
+ const contentWrapper = getRangeBlocks(doc, lastHeadingInSelection.startBlockPos, titleEndPos)
+ const contentWrapperParagraphs = contentWrapper.filter(x => x.type !== 'heading')
+ const contentWrapperHeadings = contentWrapper.filter(x => x.type === 'heading')
+
+ const normalizeSelectedContents = [
+ ...[...selectedContents].splice(0, lastHeadingIndex + 1),
+ ...contentWrapperParagraphs
+ ]
+
+ doc.nodesBetween(titleStartPos, start - 1, function (node, pos, parent, index) {
+ if (node.type.name === 'heading') {
+ const headingLevel = node.firstChild?.attrs?.level
+
+ if (headingLevel === currentHLevel) {
+ titleStartPos = pos
+ // INFO: I need the pos of last content in contentWrapper
+ titleEndPos = pos + node.content.size
+ }
+ }
+ })
+
+ const normalizeSelectedContentsBlocks = normalizeSelectedContents.map(node => state.schema.nodeFromJSON(node))
+
+ tr.delete(selectionFirstLinePos, titleEndPos)
+
+ tr.insert(tr.mapping.map(selectionFirstLinePos) - 1, normalizeSelectedContentsBlocks)
+
+ const focusSelection = new TextSelection(tr.doc.resolve(from))
+
+ tr.setSelection(focusSelection)
+
+ const titleHMap = getPrevHeadingList(tr, tr.mapping.map(titleStartPos), tr.mapping.map(titleEndPos))
+ let shouldNested = false
+
+ let mapHPost = titleHMap.filter(x =>
+ x.startBlockPos < start - 1 &&
+ x.startBlockPos >= prevHStartPos
+ )
+
+ if (!mapHPost.length) mapHPost = titleHMap
+
+ for (const heading of contentWrapperHeadings) {
+ const startBlock = mapHPost[0].startBlockPos
+ const endBlock = tr.mapping.map(mapHPost.at(0).endBlockPos)
+
+ mapHPost = getPrevHeadingList(tr, startBlock, endBlock)
+
+ const node = state.schema.nodeFromJSON(heading)
+
+ const prevBlockEqual = mapHPost.findLast(x => x.le === heading.le)
+ const prevBlockGratherFromFirst = mapHPost.find(x => x.le >= heading.le)
+ const prevBlockGratherFromLast = mapHPost.findLast(x => x.le <= heading.le)
+ const lastbloc = mapHPost[mapHPost.length - 1]
+ let prevBlock = prevBlockEqual || prevBlockGratherFromLast || prevBlockGratherFromFirst
+
+ if (lastbloc.le <= heading.le) prevBlock = lastbloc
+ shouldNested = prevBlock.le < heading.le
+
+ tr.insert(prevBlock.endBlockPos - (shouldNested ? 2 : 0), node)
+ }
+
+ return true
+}
diff --git a/packages/next.js/components/TipTap/extentions/wrapContenWithHeading.js b/packages/next.js/components/TipTap/extentions/wrapContenWithHeading.js
new file mode 100644
index 000000000..5fbc022e2
--- /dev/null
+++ b/packages/next.js/components/TipTap/extentions/wrapContenWithHeading.js
@@ -0,0 +1,136 @@
+import { TextSelection } from 'prosemirror-state'
+
+import changeHeadingLevelBackward from './changeHeadingLevel-backward'
+import {
+ getPrevHeadingList,
+ createThisBlockMap,
+ getHeadingsBlocksMap,
+ getRangeBlocks
+} from './helper'
+
+export default (arrg, attributes) => {
+ const { can, chain, commands, dispatch, editor, state, tr, view } = arrg
+ const { schema, selection, doc } = state
+ const { $from, $to, $anchor, $cursor, to } = selection
+ const { start, end, depth } = $from.blockRange($to)
+
+ const cominglevel = attributes.level
+ const caretSelectionTextBlock = { type: 'text', text: doc?.nodeAt($anchor.pos)?.text || $anchor.nodeBefore?.text || ' ' }
+ const block = createThisBlockMap($from, depth, caretSelectionTextBlock)
+
+ // TODO: check this statment for comment, (block.edge.start !== -1)
+ const parentLevel = block.edge.start !== -1 && doc?.nodeAt(block.edge.start)?.content?.content[0]?.attrs.level
+
+ // Create a new heading with the same level
+ // in this case all content below must cut and wrapp with the new heading
+ // And the depth should be the same as the sibling Heading
+ if (cominglevel === parentLevel) {
+ console.info('[Heading]: create a new heading with same level')
+ const contents = getRangeBlocks(doc, end, block.parent.end)
+ const contentWrapper = contents.length === 0 ? [block.paragraph] : contents
+
+ const jsonNode = {
+ type: 'heading',
+ content: [
+ {
+ type: 'contentHeading',
+ content: [block.headingContent],
+ attrs: {
+ level: attributes.level
+ }
+ },
+ {
+ type: 'contentWrapper',
+ content: contentWrapper
+ }
+ ]
+ }
+
+ const headingNode = state.schema.nodeFromJSON(jsonNode)
+ const insertPos = start + 1
+
+ tr.delete(insertPos, block.edge.end)
+ tr.insert(tr.mapping.map(block.edge.end), headingNode)
+
+ const newSelection = new TextSelection(tr.doc.resolve(insertPos))
+
+ tr.setSelection(newSelection)
+
+ return true
+ }
+
+ // Create a new Heading block as a child of the current Heading block
+ if (cominglevel > parentLevel) {
+ console.info('[Heading]: Create a new Heading block as a child of the current Heading block')
+
+ const titleHMap = getHeadingsBlocksMap(doc, block.start, block.parent.end)
+ const contentWrapper = getRangeBlocks(doc, end, block.parent.end)
+ const contentWrapperParagraphs = contentWrapper.filter(x => x.type !== 'heading')
+ const contentWrapperHeadings = contentWrapper.filter(x => x.type === 'heading')
+
+ const jsonNode = {
+ type: 'heading',
+ content: [
+ {
+ type: 'contentHeading',
+ content: [block.headingContent],
+ attrs: {
+ level: cominglevel
+ }
+ },
+ {
+ type: 'contentWrapper',
+ content: contentWrapperParagraphs
+ }
+ ]
+ }
+ const newHeadingNode = state.schema.nodeFromJSON(jsonNode)
+
+ tr.delete(start, block.parent.end)
+ tr.insert(tr.mapping.map(start), newHeadingNode)
+
+ const newSelection = new TextSelection(tr.doc.resolve(end))
+
+ tr.setSelection(newSelection)
+
+ let mapHPost = titleHMap
+
+ for (const heading of contentWrapperHeadings) {
+ const cominglevel = heading.le
+
+ mapHPost = getPrevHeadingList(
+ tr,
+ mapHPost.at(0).startBlockPos,
+ tr.mapping.map(mapHPost.at(0).endBlockPos)
+ )
+
+ mapHPost = mapHPost.filter(x =>
+ x.startBlockPos < heading.startBlockPos &&
+ x.startBlockPos >= block.parent.start
+ )
+
+ const prevBlockEqual = mapHPost.findLast(x => x.le === cominglevel)
+ const prevBlockGratherFromFirst = mapHPost.find(x => x.le >= cominglevel)
+ const prevBlockGratherFromLast = mapHPost.findLast(x => x.le <= cominglevel)
+ const lastBlock = mapHPost.at(-1)
+
+ let prevBlock = prevBlockEqual || prevBlockGratherFromLast || prevBlockGratherFromFirst
+
+ if (lastBlock.le <= cominglevel) prevBlock = lastBlock
+
+ const shouldNested = prevBlock.le < cominglevel
+
+ const node = state.schema.nodeFromJSON(heading)
+
+ tr.insert(prevBlock.endBlockPos - (shouldNested ? 2 : 0), node)
+ }
+
+ return true
+ }
+
+ if (cominglevel < parentLevel) {
+ console.info('[Heading]: break the current Heading chain, cominglevel is grether than parentLevel')
+
+ return changeHeadingLevelBackward(arrg, attributes, true)
+ }
+}
diff --git a/packages/next.js/components/TipTap/styles/_blocks.scss b/packages/next.js/components/TipTap/styles/_blocks.scss
new file mode 100644
index 000000000..7a2dca02d
--- /dev/null
+++ b/packages/next.js/components/TipTap/styles/_blocks.scss
@@ -0,0 +1,517 @@
+.pad {
+ position: relative;
+ @apply h-full;
+
+ .header {
+ // height: $Pad_Header__height;
+ }
+
+ .toolbars {
+ // height: $Pad_Toolbar__height;
+ }
+
+ .editor {
+ background-color: #f8f9fa;
+ overflow: auto;
+ // @apply absolute;
+
+ .tipta__editor {
+ @apply max-w-4xl w-full;
+
+ .heading {
+ background-color: #fff;
+ // padding: 0 1rem;
+ }
+
+ }
+ }
+}
+
+.toc {
+ background: rgba(black, 0.1);
+ border-radius: 0.5rem;
+ opacity: 0.75;
+ padding: 0.75rem;
+ min-width: 200px;
+ text-align: left;
+ line-height: 2rem;
+
+ &__list {
+ list-style: none;
+ padding: 0;
+
+ &::before {
+ content: "Table of Contents";
+ display: block;
+ font-size: 0.75rem;
+ font-weight: 700;
+ letter-spacing: 0.025rem;
+ opacity: 0.5;
+ text-transform: uppercase;
+ padding-bottom: 20px;
+ }
+ }
+
+ &__item {
+ padding-left: 1.5rem;
+
+ &.active > span {
+ a {
+ color: #4285f4;
+ }
+
+ a::after {
+
+ opacity: 1;
+ }
+ }
+
+ a {
+ font-weight: normal;
+ position: relative;
+ @apply text-sm text-gray-400;
+
+ &::after {
+ content: "";
+ display: block;
+ width: 100%;
+ border: 1px solid #4285f4;
+ position: absolute;
+ opacity: 0;
+ transition: all 0.1s cubic-bezier(0.39, 0.575, 0.565, 1);
+ }
+ }
+
+ a:hover {
+ opacity: 0.5;
+ color: #0D0D0D
+ }
+
+ &--1 {
+ padding-left: 0!important;
+ > span > a {
+ @apply text-base font-medium text-black;
+ }
+ }
+
+ }
+}
+
+.drag_box {
+ position: relative;
+
+ &:hover {
+ >#dragspan {
+ opacity: 1;
+ }
+ }
+
+ #dragspan {
+ display: block;
+ position: absolute;
+ left: -20px;
+ top: 0;
+ opacity: 0;
+ transition: all .1s cubic-bezier(0.39, 0.575, 0.565, 1);
+
+ &:hover {
+ opacity: 1;
+ }
+
+ &::after {
+ content: '';
+ display: block;
+ flex: 0 0 auto;
+ position: relative;
+ width: 1rem;
+ height: 1rem;
+ top: 0.3rem;
+ margin-right: 0.5rem;
+ cursor: grab;
+ background-image: url('data:image/svg+xml;charset=UTF-8,
+
+ )
+}
+
+export const Italic = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+ )
+}
+
+export const Stric = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+ )
+}
+
+export const HighlightMarker = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+ )
+}
+
+export const ClearMark = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+ )
+}
+
+export const Underline = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+ )
+}
+
+export const CheckList = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+ )
+}
+
+export const OrderList = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+ )
+}
+
+export const BulletList = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+ )
+}
+
+export const Link = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+ )
+}
+
+export const UnLink = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+ )
+}
+
+export const CheckBox = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+ )
+}
+
+export const Undo = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+ )
+}
+
+export const Redo = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+ )
+}
+
+export const Printer = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+ )
+}
+
+export const Plus = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+ )
+}
+
+export const AddComment = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+ )
+}
+
+export const Video = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+ )
+}
+
+export const Image = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+ )
+}
+
+export const Gear = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+ )
+}
+
+export const OfflineCloud = ({ size = 18, fill = 'black', className }) => {
+ return (
+
+
+ )
+}
+
+export const OnlineCloud = ({ size = 18, fill = 'black', className }) => {
+ return (
+
+
+
+ )
+}
+
+export const ArrowLeft = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+
+
+ )
+}
+
+export const Doc = ({ size = 18, fill = 'black', className }) => {
+ return (
+
+
+ )
+}
+
+export const DocsPlus = ({ size = 18, fill = 'black', className }) => {
+ return (
+
+
+
+
+
+
+ )
+}
+
+/**
+ * Renders an SVG icon "PrivateShare".
+ *
+ * @param {object} props - The component props.
+ * @param {number} [props.size=18] - The width and height of the SVG icon.
+ * @param {string} [props.fill='black'] - The color of the SVG icon.
+ * @returns {JSX.Element} The rendered SVG icon.
+ */
+export const PrivateShare = ({ size = 18, fill = 'black' }) => {
+ return (
+
+
+ )
+}
diff --git a/packages/next.js/components/icons/croper.html b/packages/next.js/components/icons/croper.html
new file mode 100644
index 000000000..31fdd8eaa
--- /dev/null
+++ b/packages/next.js/components/icons/croper.html
@@ -0,0 +1,30 @@
+
+
+
+
+ Document
+
+
+
+
+
+
+
diff --git a/packages/next.js/components/icons/logo.svg b/packages/next.js/components/icons/logo.svg
new file mode 100644
index 000000000..ac2e3241c
--- /dev/null
+++ b/packages/next.js/components/icons/logo.svg
@@ -0,0 +1 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Artboard
+ Created with Sketch.
+
+
+
+
+
+
+
+
+
Oops! You seem to be lost. 404
+
+
+
+
+
+
Docs Plus
+
+
+
+
+
+
Docs Plus
+
+
+
+
+
+
+
+
Get everyone on the same page
+
+
+
+
+
+
+ {user &&
+ signOut()}>Signout
+
}
+ {user?.id && user.email &&
+
+
Continue As:
+
{profile?.display_name || user?.email}
+
}
+
enterToPad('random')}>Create a new public doc
+
or
+
+
+
+ {error &&
*Only lowercase letters, numbers and dashes are allowed
}
+
Open public doc
+
+
+
+ {/* {!user && !user?.id && !user?.email &&
+
+
+ Sign up for private docs
+ navigate('/auth/signup')}>Sign up
+
+
+ Already have an account?
+
} */}
+
+
+
+
+
+
+ Start exploring our open-source project on GitHub , Join our discussions and help make it even better!
+
+
+
+
+
+ Star
+
+
+ Discuss
+
+
+
+
+
+
+
+
' +
+ // '
' +
+ // '
' +
+ // '
' +
+ // '
',
+ // {
+ // updateSelection: false
+ // }).setTextSelection(0).run()
+ // }
+ // }, [loading, editor])
+
+ const scrollHeadingSelection = (event) => {
+ const scrollTop = event.currentTarget.scrollTop
+ const toc = document.querySelector('.toc__list')
+ const tocLis = [...toc.querySelectorAll('.toc__item')]
+ const closest = tocLis
+ .map(li => {
+ li.classList.remove('active')
+
+ return li
+ })
+ .filter(li => {
+ const thisOffsetTop = +li.getAttribute('data-offsettop') - 220
+ // const nextSiblingOffsetTop = +li.querySelector('div > .toc__item')?.getAttribute('data-offsettop') - 220
+
+ return thisOffsetTop <= scrollTop // && nextSiblingOffsetTop >= scrollTop
+ })
+
+ // if (event.target.offsetHeight === (event.target.scrollHeight - scrollTop) - 0.5) {
+ // tocLis.at(-1)?.classList.add('active')
+ // tocLis.at(-1)?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
+
+ // return
+ // }
+
+ // console.log(closest)
+ closest.at(-1)?.classList.add('active')
+ closest.at(-1)?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
+ }
+
+ return (
+ <>
+
+ {documentTitle}
+
+
+
+ { editor ?
+
+ {loading ? 'loading...' : editor ?
: 'Loading...'}
+
+ {loading ? 'loading...' : editor ?
+
+
+ {statusCode
+ ? `An error ${statusCode} occurred on server`
+ : 'An error occurred on client'}
+
+ )
+ }
+
+ Error.getInitialProps = ({ res, err }) => {
+ const statusCode = res ? res.statusCode : err ? err.statusCode : 404
+ return { statusCode }
+ }
+
+ export default Error
diff --git a/packages/next.js/postcss.config.js b/packages/next.js/postcss.config.js
new file mode 100644
index 000000000..33ad091d2
--- /dev/null
+++ b/packages/next.js/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/packages/next.js/public/favicon.ico b/packages/next.js/public/favicon.ico
new file mode 100644
index 000000000..b0b10bd81
Binary files /dev/null and b/packages/next.js/public/favicon.ico differ
diff --git a/packages/next.js/public/icons/android-chrome-192x192.png b/packages/next.js/public/icons/android-chrome-192x192.png
new file mode 100644
index 000000000..e9fd2ba8d
Binary files /dev/null and b/packages/next.js/public/icons/android-chrome-192x192.png differ
diff --git a/packages/next.js/public/icons/android-chrome-512x512.png b/packages/next.js/public/icons/android-chrome-512x512.png
new file mode 100644
index 000000000..884b1034e
Binary files /dev/null and b/packages/next.js/public/icons/android-chrome-512x512.png differ
diff --git a/packages/next.js/public/icons/apple-touch-icon.png b/packages/next.js/public/icons/apple-touch-icon.png
new file mode 100644
index 000000000..691349dca
Binary files /dev/null and b/packages/next.js/public/icons/apple-touch-icon.png differ
diff --git a/packages/next.js/public/icons/favicon-16x16.png b/packages/next.js/public/icons/favicon-16x16.png
new file mode 100644
index 000000000..3b788ca05
Binary files /dev/null and b/packages/next.js/public/icons/favicon-16x16.png differ
diff --git a/packages/next.js/public/icons/favicon-32x32.png b/packages/next.js/public/icons/favicon-32x32.png
new file mode 100644
index 000000000..39738e56c
Binary files /dev/null and b/packages/next.js/public/icons/favicon-32x32.png differ
diff --git a/packages/next.js/public/icons/favicon.ico b/packages/next.js/public/icons/favicon.ico
new file mode 100644
index 000000000..b0b10bd81
Binary files /dev/null and b/packages/next.js/public/icons/favicon.ico differ
diff --git a/packages/next.js/public/icons/logo.svg b/packages/next.js/public/icons/logo.svg
new file mode 100644
index 000000000..844057320
--- /dev/null
+++ b/packages/next.js/public/icons/logo.svg
@@ -0,0 +1,18 @@
+
+
+
+
+
+
diff --git a/packages/next.js/public/icons/maskable_icon.png b/packages/next.js/public/icons/maskable_icon.png
new file mode 100644
index 000000000..ff16bc55d
Binary files /dev/null and b/packages/next.js/public/icons/maskable_icon.png differ
diff --git a/packages/next.js/public/icons/maskable_icon_x192.png b/packages/next.js/public/icons/maskable_icon_x192.png
new file mode 100644
index 000000000..88af3640b
Binary files /dev/null and b/packages/next.js/public/icons/maskable_icon_x192.png differ
diff --git a/packages/next.js/public/icons/maskable_icon_x384.png b/packages/next.js/public/icons/maskable_icon_x384.png
new file mode 100644
index 000000000..0458a6c7e
Binary files /dev/null and b/packages/next.js/public/icons/maskable_icon_x384.png differ
diff --git a/packages/next.js/public/icons/maskable_icon_x512.png b/packages/next.js/public/icons/maskable_icon_x512.png
new file mode 100644
index 000000000..bb8cdfcbd
Binary files /dev/null and b/packages/next.js/public/icons/maskable_icon_x512.png differ
diff --git a/packages/next.js/public/icons/screenshot1.png b/packages/next.js/public/icons/screenshot1.png
new file mode 100644
index 000000000..38cd842e9
Binary files /dev/null and b/packages/next.js/public/icons/screenshot1.png differ
diff --git a/packages/next.js/public/manifest.json b/packages/next.js/public/manifest.json
new file mode 100644
index 000000000..6e82e463d
--- /dev/null
+++ b/packages/next.js/public/manifest.json
@@ -0,0 +1,58 @@
+{
+ "name": "Docs.plus",
+ "short_name": "Docs.plus",
+ "background_color": "#3367D6",
+ "display": "standalone",
+ "theme_color": "#3367D6",
+ "description": "A real-time collaborative",
+ "start_url": "/",
+ "scope": "/",
+ "icons": [
+ {
+ "src": "icons/favicon.ico",
+ "type": "image/x-icon",
+ "sizes": "any"
+ },
+ {
+ "src": "icons/logo.svg",
+ "type": "image/svg+xml",
+ "sizes": "any"
+ },
+ {
+ "src": "icons/android-chrome-192x192.png",
+ "type": "image/png",
+ "sizes": "192x192"
+ },
+ {
+ "src": "icons/android-chrome-512x512.png",
+ "type": "image/png",
+ "sizes": "512x512"
+ },
+ {
+ "src": "icons/maskable_icon_x192.png",
+ "sizes": "192x192",
+ "type": "image/png",
+ "purpose": "maskable"
+ },
+ {
+ "src": "icons/maskable_icon_x384.png",
+ "sizes": "384x384",
+ "type": "image/png",
+ "purpose": "maskable"
+ },
+ {
+ "src": "icons/maskable_icon_x512.png",
+ "sizes": "512x512",
+ "type": "image/png",
+ "purpose": "maskable"
+ }
+ ],
+ "screenshots": [
+ {
+ "src": "icons/screenshot1.png",
+ "type": "image/png",
+ "sizes": "1244x1370"
+ }
+ ],
+ "splash_pages": null
+}
diff --git a/packages/next.js/styles/_blocks.scss b/packages/next.js/styles/_blocks.scss
new file mode 100644
index 000000000..7a2dca02d
--- /dev/null
+++ b/packages/next.js/styles/_blocks.scss
@@ -0,0 +1,517 @@
+.pad {
+ position: relative;
+ @apply h-full;
+
+ .header {
+ // height: $Pad_Header__height;
+ }
+
+ .toolbars {
+ // height: $Pad_Toolbar__height;
+ }
+
+ .editor {
+ background-color: #f8f9fa;
+ overflow: auto;
+ // @apply absolute;
+
+ .tipta__editor {
+ @apply max-w-4xl w-full;
+
+ .heading {
+ background-color: #fff;
+ // padding: 0 1rem;
+ }
+
+ }
+ }
+}
+
+.toc {
+ background: rgba(black, 0.1);
+ border-radius: 0.5rem;
+ opacity: 0.75;
+ padding: 0.75rem;
+ min-width: 200px;
+ text-align: left;
+ line-height: 2rem;
+
+ &__list {
+ list-style: none;
+ padding: 0;
+
+ &::before {
+ content: "Table of Contents";
+ display: block;
+ font-size: 0.75rem;
+ font-weight: 700;
+ letter-spacing: 0.025rem;
+ opacity: 0.5;
+ text-transform: uppercase;
+ padding-bottom: 20px;
+ }
+ }
+
+ &__item {
+ padding-left: 1.5rem;
+
+ &.active > span {
+ a {
+ color: #4285f4;
+ }
+
+ a::after {
+
+ opacity: 1;
+ }
+ }
+
+ a {
+ font-weight: normal;
+ position: relative;
+ @apply text-sm text-gray-400;
+
+ &::after {
+ content: "";
+ display: block;
+ width: 100%;
+ border: 1px solid #4285f4;
+ position: absolute;
+ opacity: 0;
+ transition: all 0.1s cubic-bezier(0.39, 0.575, 0.565, 1);
+ }
+ }
+
+ a:hover {
+ opacity: 0.5;
+ color: #0D0D0D
+ }
+
+ &--1 {
+ padding-left: 0!important;
+ > span > a {
+ @apply text-base font-medium text-black;
+ }
+ }
+
+ }
+}
+
+.drag_box {
+ position: relative;
+
+ &:hover {
+ >#dragspan {
+ opacity: 1;
+ }
+ }
+
+ #dragspan {
+ display: block;
+ position: absolute;
+ left: -20px;
+ top: 0;
+ opacity: 0;
+ transition: all .1s cubic-bezier(0.39, 0.575, 0.565, 1);
+
+ &:hover {
+ opacity: 1;
+ }
+
+ &::after {
+ content: '';
+ display: block;
+ flex: 0 0 auto;
+ position: relative;
+ width: 1rem;
+ height: 1rem;
+ top: 0.3rem;
+ margin-right: 0.5rem;
+ cursor: grab;
+ background-image: url('data:image/svg+xml;charset=UTF-8, 
+
+
+
diff --git a/packages/next.js/components/icons/logo copy.svg b/packages/next.js/components/icons/logo copy.svg
new file mode 100644
index 000000000..f55d441bc
--- /dev/null
+++ b/packages/next.js/components/icons/logo copy.svg
@@ -0,0 +1,8 @@
+
+
+
diff --git a/packages/next.js/components/icons/logo.svg b/packages/next.js/components/icons/logo.svg
new file mode 100644
index 000000000..ac2e3241c
--- /dev/null
+++ b/packages/next.js/components/icons/logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/next.js/components/icons/material_common_sprite413_blue.svg b/packages/next.js/components/icons/material_common_sprite413_blue.svg
new file mode 100644
index 000000000..a7ff41068
--- /dev/null
+++ b/packages/next.js/components/icons/material_common_sprite413_blue.svg
@@ -0,0 +1,2029 @@
+
\ No newline at end of file
diff --git a/packages/next.js/components/icons/sprite-24.svg b/packages/next.js/components/icons/sprite-24.svg
new file mode 100644
index 000000000..7c1693cbb
--- /dev/null
+++ b/packages/next.js/components/icons/sprite-24.svg
@@ -0,0 +1,145 @@
+
\ No newline at end of file
diff --git a/packages/next.js/db.js b/packages/next.js/db.js
new file mode 100644
index 000000000..e787009fd
--- /dev/null
+++ b/packages/next.js/db.js
@@ -0,0 +1,15 @@
+import Dexie from 'dexie'
+
+export let db
+
+export const initDB = (dbName, t11) => {
+ const DexieDB = new Dexie(dbName)
+
+ const newdb = DexieDB.version(1).stores({
+ meta: 'headingId, *docId, text, crinkleOpen, level'
+ })
+
+ db = newdb.db
+
+ return db
+}
diff --git a/packages/next.js/next.config.js b/packages/next.js/next.config.js
new file mode 100644
index 000000000..40fafe0b2
--- /dev/null
+++ b/packages/next.js/next.config.js
@@ -0,0 +1,17 @@
+/** @type {import('next').NextConfig} */
+
+const runtimeCaching = require('next-pwa/cache')
+const isProduction = process.env.NODE_ENV === 'production';
+
+const withPWA = require('next-pwa')({
+ dest: 'public',
+ register: true,
+ skipWaiting: false,
+ runtimeCaching
+})
+
+
+module.exports = withPWA({
+ // config
+
+})
diff --git a/packages/next.js/package.json b/packages/next.js/package.json
new file mode 100644
index 000000000..8e2f935f7
--- /dev/null
+++ b/packages/next.js/package.json
@@ -0,0 +1,84 @@
+{
+ "name": "@docsplus/next.js",
+ "version": "0.0.0",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "start": "next start"
+ },
+ "dependencies": {
+ "@hocuspocus/provider": "^2.0.1",
+ "@tanstack/react-query": "^4.28.0",
+ "@tiptap/core": "^2.0.1",
+ "@tiptap/extension-blockquote": "^2.0.0-beta.209",
+ "@tiptap/extension-bold": "^2.0.0-beta.209",
+ "@tiptap/extension-bullet-list": "^2.0.0-beta.209",
+ "@tiptap/extension-code-block": "^2.0.0-beta.209",
+ "@tiptap/extension-code-block-lowlight": "^2.0.0-beta.209",
+ "@tiptap/extension-collaboration": "^2.0.1",
+ "@tiptap/extension-collaboration-cursor": "^2.0.1",
+ "@tiptap/extension-document": "^2.0.0-beta.209",
+ "@tiptap/extension-dropcursor": "^2.0.0-beta.209",
+ "@tiptap/extension-gapcursor": "^2.0.0-beta.209",
+ "@tiptap/extension-heading": "^2.0.0-beta.209",
+ "@tiptap/extension-highlight": "^2.0.0-beta.209",
+ "@tiptap/extension-image": "^2.0.0-beta.209",
+ "@tiptap/extension-italic": "^2.0.0-beta.209",
+ "@tiptap/extension-link": "^2.0.0-beta.209",
+ "@tiptap/extension-list-item": "^2.0.0-beta.209",
+ "@tiptap/extension-paragraph": "^2.0.0-beta.209",
+ "@tiptap/extension-placeholder": "^2.0.0-beta.209",
+ "@tiptap/extension-strike": "^2.0.0-beta.209",
+ "@tiptap/extension-subscript": "^2.0.0-beta.209",
+ "@tiptap/extension-superscript": "^2.0.0-beta.209",
+ "@tiptap/extension-table": "^2.0.0-beta.209",
+ "@tiptap/extension-table-cell": "^2.0.0-beta.209",
+ "@tiptap/extension-table-header": "^2.0.0-beta.209",
+ "@tiptap/extension-table-row": "^2.0.0-beta.209",
+ "@tiptap/extension-task-item": "^2.0.0-beta.209",
+ "@tiptap/extension-task-list": "^2.0.0-beta.209",
+ "@tiptap/extension-text": "^2.0.0-beta.209",
+ "@tiptap/extension-text-align": "^2.0.0-beta.209",
+ "@tiptap/extension-typography": "^2.0.0-beta.209",
+ "@tiptap/extension-underline": "^2.0.0-beta.209",
+ "@tiptap/pm": "^2.0.1",
+ "@tiptap/prosemirror-tables": "^1.1.4",
+ "@tiptap/react": "^2.0.1",
+ "@tiptap/starter-kit": "^2.0.1",
+ "dexie": "^3.2.3",
+ "lowlight": "^2.8.1",
+ "next": "latest",
+ "next-pwa": "^5.6.0",
+ "prosemirror-commands": "^1.5.0",
+ "prosemirror-dropcursor": "^1.6.1",
+ "prosemirror-gapcursor": "^1.3.1",
+ "prosemirror-history": "^1.3.0",
+ "prosemirror-schema-list": "^1.2.2",
+ "prosemirror-state": "^1.4.2",
+ "prosemirror-transform": "^1.7.0",
+ "pubsub-js": "^1.9.4",
+ "randomcolor": "^0.6.2",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-github-btn": "^1.4.0",
+ "react-select": "^5.7.2",
+ "short-unique-id": "^4.4.4",
+ "slugify": "^1.6.6",
+ "y-indexeddb": "^9.0.9",
+ "y-prosemirror": "^1.2.0",
+ "y-webrtc": "^10.2.5",
+ "y-websocket": "^1.4.5",
+ "yjs": "^13.5.51"
+ },
+ "devDependencies": {
+ "@hocuspocus/cli": "^1.0.1",
+ "@types/node": "17.0.4",
+ "@types/react": "17.0.38",
+ "autoprefixer": "^10.4.14",
+ "postcss": "^8.4.21",
+ "sass": "^1.60.0",
+ "tailwindcss": "^3.3.0",
+ "typescript": "4.5.4"
+ }
+}
diff --git a/packages/next.js/pages/404.jsx b/packages/next.js/pages/404.jsx
new file mode 100644
index 000000000..b0d9d8e46
--- /dev/null
+++ b/packages/next.js/pages/404.jsx
@@ -0,0 +1,14 @@
+
+import Link from 'next/link'
+export default function Custom404() {
+ return (
+