payload-richtext-tiptap 0.0.20 → 0.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/fields/TiptapEditor/Components.d.ts +0 -1
- package/dist/src/fields/TiptapEditor/Components.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/Components.js +0 -1
- package/dist/src/fields/TiptapEditor/Components.js.map +1 -1
- package/dist/src/fields/TiptapEditor/features/TableOfContents/TableOfContents.js +2 -4
- package/dist/src/fields/TiptapEditor/features/TableOfContents/TableOfContents.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Components.d.ts","sourceRoot":"","sources":["../../../../src/fields/TiptapEditor/Components.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Components.d.ts","sourceRoot":"","sources":["../../../../src/fields/TiptapEditor/Components.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,eAAe,EAAe,MAAM,gBAAgB,CAAC;AAqC9D,eAAO,MAAM,eAAe,EAAE,eA2B7B,CAAC"}
|
|
@@ -13,7 +13,6 @@ import React, { useCallback, useEffect, useState } from "react";
|
|
|
13
13
|
import { useField } from "@payloadcms/ui/forms/useField";
|
|
14
14
|
import { useLocale } from "@payloadcms/ui/providers/Locale";
|
|
15
15
|
import { BlockEditor } from "./features/BlockEditor/BlockEditor.js";
|
|
16
|
-
import "../../styles.css";
|
|
17
16
|
const useDarkmode = ()=>{
|
|
18
17
|
const [isDarkMode, setIsDarkMode] = useState(typeof window !== "undefined" ? document.documentElement.getAttribute("data-theme") === "dark" : false);
|
|
19
18
|
useEffect(()=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/fields/TiptapEditor/Components.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useEffect, useState } from \"react\";\n\n// import 'cal-sans'\n\n// import '@fontsource/inter/100.css'\n// import '@fontsource/inter/200.css'\n// import '@fontsource/inter/300.css'\n// import '@fontsource/inter/400.css'\n// import '@fontsource/inter/500.css'\n// import '@fontsource/inter/600.css'\n// import '@fontsource/inter/700.css'\n// import { BlockEditor } from './features/BlockEditor'\nimport { useField } from \"@payloadcms/ui/forms/useField\";\nimport { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport { BlockEditor } from \"./features/BlockEditor/BlockEditor.js\";\n\
|
|
1
|
+
{"version":3,"sources":["../../../../src/fields/TiptapEditor/Components.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useEffect, useState } from \"react\";\n\n// import 'cal-sans'\n\n// import '@fontsource/inter/100.css'\n// import '@fontsource/inter/200.css'\n// import '@fontsource/inter/300.css'\n// import '@fontsource/inter/400.css'\n// import '@fontsource/inter/500.css'\n// import '@fontsource/inter/600.css'\n// import '@fontsource/inter/700.css'\n// import { BlockEditor } from './features/BlockEditor'\nimport { useField } from \"@payloadcms/ui/forms/useField\";\nimport { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport { BlockEditor } from \"./features/BlockEditor/BlockEditor.js\";\n\n// import \"../../styles.css\";\nimport { JSONField } from \"payload/types\";\nimport { CustomComponent, ServerProps } from \"payload/config\";\n\ntype Props = JSONField & ServerProps;\n\nconst useDarkmode = () => {\n const [isDarkMode, setIsDarkMode] = useState<boolean>(\n typeof window !== \"undefined\"\n ? document.documentElement.getAttribute(\"data-theme\") === \"dark\"\n : false\n );\n\n useEffect(() => {\n const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n const handleChange = () => setIsDarkMode(mediaQuery.matches);\n mediaQuery.addEventListener(\"change\", handleChange);\n return () => mediaQuery.removeEventListener(\"change\", handleChange);\n }, []);\n\n useEffect(() => {\n document.documentElement.classList.toggle(\"dark\", isDarkMode);\n }, [isDarkMode]);\n\n const toggleDarkMode = useCallback(\n () => setIsDarkMode((isDark) => !isDark),\n []\n );\n const lightMode = useCallback(() => setIsDarkMode(false), []);\n const darkMode = useCallback(() => setIsDarkMode(true), []);\n\n return {\n isDarkMode,\n toggleDarkMode,\n lightMode,\n darkMode,\n };\n};\n\nexport const EditorComponent: CustomComponent = (props) => {\n const { value, setValue } = useField<any>({\n path: props.name,\n });\n\n useDarkmode();\n const hasCollab = false;\n // const { i18n } = useTranslation()\n\n const { code } = useLocale();\n return (\n <div\n lang={code}\n className=\"content-field content-field-disabled\"\n style={{ width: \"100%\", height: \"100%\", overflow: \"visible\" }}\n >\n {/* {DarkModeSwitcher} */}\n {/* <FieldLabel label={props?.label ?? capitalize(props?.name) ?? ''} /> */}\n <BlockEditor\n hasCollab={hasCollab}\n content={value}\n handleChange={(value) => {\n setValue(value);\n }}\n />\n </div>\n );\n};\n"],"names":["React","useCallback","useEffect","useState","useField","useLocale","BlockEditor","useDarkmode","isDarkMode","setIsDarkMode","window","document","documentElement","getAttribute","mediaQuery","matchMedia","handleChange","matches","addEventListener","removeEventListener","classList","toggle","toggleDarkMode","isDark","lightMode","darkMode","EditorComponent","props","value","setValue","path","name","hasCollab","code","div","lang","className","style","width","height","overflow","content"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,OAAOA,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAEhE,oBAAoB;AAEpB,qCAAqC;AACrC,qCAAqC;AACrC,qCAAqC;AACrC,qCAAqC;AACrC,qCAAqC;AACrC,qCAAqC;AACrC,qCAAqC;AACrC,uDAAuD;AACvD,SAASC,QAAQ,QAAQ,gCAAgC;AACzD,SAASC,SAAS,QAAQ,kCAAkC;AAC5D,SAASC,WAAW,QAAQ,wCAAwC;AAQpE,MAAMC,cAAc;IAClB,MAAM,CAACC,YAAYC,cAAc,GAAGN,SAClC,OAAOO,WAAW,cACdC,SAASC,eAAe,CAACC,YAAY,CAAC,kBAAkB,SACxD;IAGNX,UAAU;QACR,MAAMY,aAAaJ,OAAOK,UAAU,CAAC;QACrC,MAAMC,eAAe,IAAMP,cAAcK,WAAWG,OAAO;QAC3DH,WAAWI,gBAAgB,CAAC,UAAUF;QACtC,OAAO,IAAMF,WAAWK,mBAAmB,CAAC,UAAUH;IACxD,GAAG,EAAE;IAELd,UAAU;QACRS,SAASC,eAAe,CAACQ,SAAS,CAACC,MAAM,CAAC,QAAQb;IACpD,GAAG;QAACA;KAAW;IAEf,MAAMc,iBAAiBrB,YACrB,IAAMQ,cAAc,CAACc,SAAW,CAACA,SACjC,EAAE;IAEJ,MAAMC,YAAYvB,YAAY,IAAMQ,cAAc,QAAQ,EAAE;IAC5D,MAAMgB,WAAWxB,YAAY,IAAMQ,cAAc,OAAO,EAAE;IAE1D,OAAO;QACLD;QACAc;QACAE;QACAC;IACF;AACF;AAEA,OAAO,MAAMC,kBAAmC,CAACC;IAC/C,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGzB,SAAc;QACxC0B,MAAMH,MAAMI,IAAI;IAClB;IAEAxB;IACA,MAAMyB,YAAY;IAClB,oCAAoC;IAEpC,MAAM,EAAEC,IAAI,EAAE,GAAG5B;IACjB,qBACE,KAAC6B;QACCC,MAAMF;QACNG,WAAU;QACVC,OAAO;YAAEC,OAAO;YAAQC,QAAQ;YAAQC,UAAU;QAAU;kBAI5D,cAAA,KAAClC;YACC0B,WAAWA;YACXS,SAASb;YACTZ,cAAc,CAACY;gBACbC,SAASD;YACX;;;AAIR,EAAE"}
|
|
@@ -29,8 +29,7 @@ export const TableOfContents = /*#__PURE__*/ memo(({ editor, onItemClick })=>{
|
|
|
29
29
|
lang: i18n.language,
|
|
30
30
|
children: [
|
|
31
31
|
/*#__PURE__*/ _jsx("div", {
|
|
32
|
-
className: "mb-2 text-xs font-semibold uppercase text-neutral-500 dark:text-neutral-400"
|
|
33
|
-
children: "Table of Contents"
|
|
32
|
+
className: "mb-2 text-xs font-semibold uppercase text-neutral-500 dark:text-neutral-400"
|
|
34
33
|
}),
|
|
35
34
|
data && data.content.length > 0 ? /*#__PURE__*/ _jsx("div", {
|
|
36
35
|
className: "flex flex-col gap-1",
|
|
@@ -48,8 +47,7 @@ export const TableOfContents = /*#__PURE__*/ memo(({ editor, onItemClick })=>{
|
|
|
48
47
|
]
|
|
49
48
|
}, item.id))
|
|
50
49
|
}) : /*#__PURE__*/ _jsx("div", {
|
|
51
|
-
className: "text-sm text-neutral-500"
|
|
52
|
-
children: "Start adding headlines to your document"
|
|
50
|
+
className: "text-sm text-neutral-500"
|
|
53
51
|
})
|
|
54
52
|
]
|
|
55
53
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/features/TableOfContents/TableOfContents.tsx"],"sourcesContent":["import React from \"react\";\nimport { Editor as CoreEditor } from \"@tiptap/core\";\nimport { memo, useEffect, useState } from \"react\";\nimport { TableOfContentsStorage } from \"@tiptap-pro/extension-table-of-contents\";\nimport { cn } from \"../../lib/utils/index.js\";\n// import { toTranslationKey } from '@/languages'\nimport { useTranslation } from \"@payloadcms/ui/providers/Translation\";\n\nexport type TableOfContentsProps = {\n editor: CoreEditor;\n onItemClick?: () => void;\n};\n\nexport const TableOfContents = memo(\n ({ editor, onItemClick }: TableOfContentsProps) => {\n const [data, setData] = useState<TableOfContentsStorage | null>(null);\n\n useEffect(() => {\n const handler = ({ editor: currentEditor }: { editor: CoreEditor }) => {\n setData({ ...currentEditor.extensionStorage.tableOfContents });\n };\n\n handler({ editor });\n\n editor.on(\"update\", handler);\n editor.on(\"selectionUpdate\", handler);\n\n return () => {\n editor.off(\"update\", handler);\n editor.off(\"selectionUpdate\", handler);\n };\n }, [editor]);\n const { i18n } = useTranslation();\n\n return (\n <div lang={i18n.language}>\n <div className=\"mb-2 text-xs font-semibold uppercase text-neutral-500 dark:text-neutral-400\">\n {/* {toTranslationKey('table_of_contents')}
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/features/TableOfContents/TableOfContents.tsx"],"sourcesContent":["import React from \"react\";\nimport { Editor as CoreEditor } from \"@tiptap/core\";\nimport { memo, useEffect, useState } from \"react\";\nimport { TableOfContentsStorage } from \"@tiptap-pro/extension-table-of-contents\";\nimport { cn } from \"../../lib/utils/index.js\";\n// import { toTranslationKey } from '@/languages'\nimport { useTranslation } from \"@payloadcms/ui/providers/Translation\";\n\nexport type TableOfContentsProps = {\n editor: CoreEditor;\n onItemClick?: () => void;\n};\n\nexport const TableOfContents = memo(\n ({ editor, onItemClick }: TableOfContentsProps) => {\n const [data, setData] = useState<TableOfContentsStorage | null>(null);\n\n useEffect(() => {\n const handler = ({ editor: currentEditor }: { editor: CoreEditor }) => {\n setData({ ...currentEditor.extensionStorage.tableOfContents });\n };\n\n handler({ editor });\n\n editor.on(\"update\", handler);\n editor.on(\"selectionUpdate\", handler);\n\n return () => {\n editor.off(\"update\", handler);\n editor.off(\"selectionUpdate\", handler);\n };\n }, [editor]);\n const { i18n } = useTranslation();\n\n return (\n <div lang={i18n.language}>\n <div className=\"mb-2 text-xs font-semibold uppercase text-neutral-500 dark:text-neutral-400\">\n {/* {toTranslationKey('table_of_contents')}Table of Contents */}\n </div>\n {data && data.content.length > 0 ? (\n <div className=\"flex flex-col gap-1\">\n {data.content.map((item) => (\n <a\n key={item.id}\n href={`#${item.id}`}\n style={{ marginLeft: `${1 * item.level - 1}rem` }}\n onClick={onItemClick}\n className={cn(\n \"block font-medium text-neutral-500 dark:text-neutral-300 p-1 rounded bg-opacity-10 text-sm hover:text-neutral-800 transition-all hover:bg-black hover:bg-opacity-5 truncate w-full\",\n item.isActive &&\n \"text-neutral-800 bg-neutral-100 dark:text-neutral-100 dark:bg-neutral-900\"\n )}\n >\n {item.itemIndex}. {item.textContent}\n </a>\n ))}\n </div>\n ) : (\n <div className=\"text-sm text-neutral-500\">\n {/* Start adding headlines to your document */}\n {/* {toTranslationKey(\"start_adding_headlines_to_your_document\")} */}\n </div>\n )}\n </div>\n );\n }\n);\n\nTableOfContents.displayName = \"TableOfContents\";\n"],"names":["React","memo","useEffect","useState","cn","useTranslation","TableOfContents","editor","onItemClick","data","setData","handler","currentEditor","extensionStorage","tableOfContents","on","off","i18n","div","lang","language","className","content","length","map","item","a","href","id","style","marginLeft","level","onClick","isActive","itemIndex","textContent","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,OAAOA,WAAW,QAAQ;AAE1B,SAASC,IAAI,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAElD,SAASC,EAAE,QAAQ,2BAA2B;AAC9C,iDAAiD;AACjD,SAASC,cAAc,QAAQ,uCAAuC;AAOtE,OAAO,MAAMC,gCAAkBL,KAC7B,CAAC,EAAEM,MAAM,EAAEC,WAAW,EAAwB;IAC5C,MAAM,CAACC,MAAMC,QAAQ,GAAGP,SAAwC;IAEhED,UAAU;QACR,MAAMS,UAAU,CAAC,EAAEJ,QAAQK,aAAa,EAA0B;YAChEF,QAAQ;gBAAE,GAAGE,cAAcC,gBAAgB,CAACC,eAAe;YAAC;QAC9D;QAEAH,QAAQ;YAAEJ;QAAO;QAEjBA,OAAOQ,EAAE,CAAC,UAAUJ;QACpBJ,OAAOQ,EAAE,CAAC,mBAAmBJ;QAE7B,OAAO;YACLJ,OAAOS,GAAG,CAAC,UAAUL;YACrBJ,OAAOS,GAAG,CAAC,mBAAmBL;QAChC;IACF,GAAG;QAACJ;KAAO;IACX,MAAM,EAAEU,IAAI,EAAE,GAAGZ;IAEjB,qBACE,MAACa;QAAIC,MAAMF,KAAKG,QAAQ;;0BACtB,KAACF;gBAAIG,WAAU;;YAGdZ,QAAQA,KAAKa,OAAO,CAACC,MAAM,GAAG,kBAC7B,KAACL;gBAAIG,WAAU;0BACZZ,KAAKa,OAAO,CAACE,GAAG,CAAC,CAACC,qBACjB,MAACC;wBAECC,MAAM,CAAC,CAAC,EAAEF,KAAKG,EAAE,CAAC,CAAC;wBACnBC,OAAO;4BAAEC,YAAY,CAAC,EAAE,IAAIL,KAAKM,KAAK,GAAG,EAAE,GAAG,CAAC;wBAAC;wBAChDC,SAASxB;wBACTa,WAAWjB,GACT,sLACAqB,KAAKQ,QAAQ,IACX;;4BAGHR,KAAKS,SAAS;4BAAC;4BAAGT,KAAKU,WAAW;;uBAV9BV,KAAKG,EAAE;+BAelB,KAACV;gBAAIG,WAAU;;;;AAOvB,GACA;AAEFf,gBAAgB8B,WAAW,GAAG"}
|