@kyro-cms/admin 0.9.9 → 0.10.1
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/index.cjs +95 -33
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +96 -34
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/fields/RichTextField.tsx +45 -27
- package/src/hooks/examples/sample-hook-2.ts +0 -2
- package/src/integration.ts +28 -2
- package/src/plugins/examples/sample-plugin-2.ts +0 -1
- package/src/plugins/examples/sample-plugin.ts +0 -2
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { createContext, lazy, useState, useRef, useEffect, useCallback, useContext, useMemo, Suspense } from 'react';
|
|
2
2
|
import { create, useStore } from 'zustand';
|
|
3
3
|
import { persist, createJSONStorage } from 'zustand/middleware';
|
|
4
|
-
import { GripVertical, Copy, X, Video, Mail, Clock, Database, Users, Tag, Image, Activity, CircleHelp, Sparkles, Blocks, Columns3, Link2, ListOrdered, Box, Heading1, Star, AlignLeft, ChevronDown, File, Code, List, Plus, ChevronRight, ChevronUp, Search, LoaderCircle, Check, RefreshCw, Undo, Redo, Bold, Italic, Underline, Strikethrough, Highlighter, Palette, CheckSquare, Quote, Terminal, Minus, AlignCenter, AlignRight, Link, Minimize2, Maximize2, Grid3X3, Filter, FolderPlus, FolderInput, Folder, Trash2,
|
|
4
|
+
import { GripVertical, Copy, X, Video, Mail, Clock, Database, Users, Tag, Image, Activity, CircleHelp, Sparkles, Blocks, Columns3, Link2, ListOrdered, Box, Heading1, Star, AlignLeft, ChevronDown, File, Code, List, Plus, ChevronRight, ChevronUp, Search, LoaderCircle, Check, RefreshCw, CodeXml, FileText, Music, Film, Undo, Redo, Bold, Italic, Underline, Strikethrough, Highlighter, Palette, CheckSquare, Quote, Terminal, Minus, AlignCenter, AlignRight, Link, Minimize2, Maximize2, Grid3X3, Filter, FolderPlus, FolderInput, Folder, Trash2, Archive, Download, Crop, Server, Pencil, Eye, EllipsisVertical, Send, Info, TriangleAlert, ShieldAlert, CircleCheck, History, CheckCircle2, User, GitCompare, Undo2, ExternalLink, Settings, Shield, Hexagon, Network, Sun, Moon, LogOut, ArrowRight, LayoutDashboard, ArrowUpRight, Webhook, Zap, Pause, Play, Key, Lock, EyeOff, CirclePlay, RefreshCcw, Save, UserPlus, LockOpen } from 'lucide-react';
|
|
5
5
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
6
6
|
import { createPortal } from 'react-dom';
|
|
7
7
|
import { useEditor, EditorContent } from '@tiptap/react';
|
|
@@ -3840,33 +3840,63 @@ function RichTextField({
|
|
|
3840
3840
|
error,
|
|
3841
3841
|
disabled
|
|
3842
3842
|
}) {
|
|
3843
|
-
const [isExpanded, setIsExpanded] = useState(false);
|
|
3844
|
-
const [panelWidth, setPanelWidth] = useState(0);
|
|
3845
|
-
const [isMediaPickerOpen, setIsMediaPickerOpen] = useState(false);
|
|
3846
3843
|
const [isMounted, setIsMounted] = useState(false);
|
|
3847
3844
|
useEffect(() => {
|
|
3848
3845
|
setIsMounted(true);
|
|
3849
3846
|
}, []);
|
|
3847
|
+
if (!isMounted) {
|
|
3848
|
+
return /* @__PURE__ */ jsx(FieldLayout, { field: field3, error, children: /* @__PURE__ */ jsxs(
|
|
3849
|
+
"div",
|
|
3850
|
+
{
|
|
3851
|
+
className: `border rounded-lg bg-[var(--kyro-bg)] overflow-hidden border-[var(--kyro-border)] flex flex-col shadow-sm transition-all duration-200
|
|
3852
|
+
${error ? "border-[var(--kyro-error)] shadow-[0_0_0_1px_var(--kyro-error)]" : "border-[var(--kyro-border)]"}
|
|
3853
|
+
${disabled ? "opacity-60 cursor-not-allowed" : ""}`,
|
|
3854
|
+
children: [
|
|
3855
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1.5 p-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-bg-secondary)] rounded-t-lg h-[40px]" }),
|
|
3856
|
+
/* @__PURE__ */ jsx("div", { className: "overflow-y-auto min-h-[160px] max-h-[400px] p-4" })
|
|
3857
|
+
]
|
|
3858
|
+
}
|
|
3859
|
+
) });
|
|
3860
|
+
}
|
|
3861
|
+
return /* @__PURE__ */ jsx(
|
|
3862
|
+
RichTextEditor,
|
|
3863
|
+
{
|
|
3864
|
+
field: field3,
|
|
3865
|
+
value,
|
|
3866
|
+
onChange,
|
|
3867
|
+
error,
|
|
3868
|
+
disabled
|
|
3869
|
+
}
|
|
3870
|
+
);
|
|
3871
|
+
}
|
|
3872
|
+
function RichTextEditor({
|
|
3873
|
+
field: field3,
|
|
3874
|
+
value,
|
|
3875
|
+
onChange,
|
|
3876
|
+
error,
|
|
3877
|
+
disabled
|
|
3878
|
+
}) {
|
|
3879
|
+
const [isExpanded, setIsExpanded] = useState(false);
|
|
3880
|
+
const [panelWidth, setPanelWidth] = useState(0);
|
|
3881
|
+
const [isMediaPickerOpen, setIsMediaPickerOpen] = useState(false);
|
|
3850
3882
|
useEffect(() => {
|
|
3851
3883
|
if (!isExpanded) {
|
|
3852
3884
|
setPanelWidth(0);
|
|
3853
3885
|
return;
|
|
3854
3886
|
}
|
|
3887
|
+
const panel = document.querySelector('[data-kyro-slide-panel="true"]');
|
|
3855
3888
|
const updateWidth = () => {
|
|
3856
|
-
|
|
3857
|
-
|
|
3858
|
-
setPanelWidth(panel2.getBoundingClientRect().width);
|
|
3889
|
+
if (panel) {
|
|
3890
|
+
setPanelWidth(panel.getBoundingClientRect().width);
|
|
3859
3891
|
} else {
|
|
3860
3892
|
setPanelWidth(0);
|
|
3861
3893
|
}
|
|
3862
3894
|
};
|
|
3863
3895
|
updateWidth();
|
|
3864
|
-
|
|
3865
|
-
|
|
3866
|
-
|
|
3867
|
-
|
|
3868
|
-
updateWidth();
|
|
3869
|
-
});
|
|
3896
|
+
const observer = new MutationObserver(() => {
|
|
3897
|
+
updateWidth();
|
|
3898
|
+
});
|
|
3899
|
+
if (panel) {
|
|
3870
3900
|
observer.observe(panel);
|
|
3871
3901
|
}
|
|
3872
3902
|
window.addEventListener("resize", updateWidth);
|
|
@@ -3904,7 +3934,7 @@ function RichTextField({
|
|
|
3904
3934
|
TextStyle,
|
|
3905
3935
|
Color
|
|
3906
3936
|
],
|
|
3907
|
-
content: value || { type: "doc", content: [] },
|
|
3937
|
+
content: Array.isArray(value) ? { type: "doc", content: value } : value || { type: "doc", content: [] },
|
|
3908
3938
|
editable: !disabled,
|
|
3909
3939
|
onUpdate: ({ editor: editor2 }) => {
|
|
3910
3940
|
onChange(editor2.getJSON());
|
|
@@ -3917,23 +3947,9 @@ function RichTextField({
|
|
|
3917
3947
|
});
|
|
3918
3948
|
useEffect(() => {
|
|
3919
3949
|
if (editor && value && JSON.stringify(value) !== JSON.stringify(editor.getJSON())) {
|
|
3920
|
-
editor.commands.setContent(value);
|
|
3950
|
+
editor.commands.setContent(Array.isArray(value) ? { type: "doc", content: value } : value);
|
|
3921
3951
|
}
|
|
3922
3952
|
}, [value, editor]);
|
|
3923
|
-
if (!isMounted) {
|
|
3924
|
-
return /* @__PURE__ */ jsx(FieldLayout, { field: field3, error, children: /* @__PURE__ */ jsxs(
|
|
3925
|
-
"div",
|
|
3926
|
-
{
|
|
3927
|
-
className: `border rounded-lg bg-[var(--kyro-bg)] overflow-hidden border-[var(--kyro-border)] flex flex-col shadow-sm transition-all duration-200
|
|
3928
|
-
${error ? "border-[var(--kyro-error)] shadow-[0_0_0_1px_var(--kyro-error)]" : "border-[var(--kyro-border)]"}
|
|
3929
|
-
${disabled ? "opacity-60 cursor-not-allowed" : ""}`,
|
|
3930
|
-
children: [
|
|
3931
|
-
/* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1.5 p-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-bg-secondary)] rounded-t-lg h-[40px]" }),
|
|
3932
|
-
/* @__PURE__ */ jsx("div", { className: "overflow-y-auto min-h-[160px] max-h-[400px] p-4" })
|
|
3933
|
-
]
|
|
3934
|
-
}
|
|
3935
|
-
) });
|
|
3936
|
-
}
|
|
3937
3953
|
return /* @__PURE__ */ jsxs(FieldLayout, { field: field3, error, children: [
|
|
3938
3954
|
isExpanded ? (
|
|
3939
3955
|
// Maximize mode placeholder inside form
|
|
@@ -14682,7 +14698,6 @@ var samplePlugin = {
|
|
|
14682
14698
|
description: "A tiny sample plugin to demonstrate the extensibility surface",
|
|
14683
14699
|
hooks: {
|
|
14684
14700
|
onAdminReady: () => {
|
|
14685
|
-
console.log("[ Kyro Admin ] sample-plugin: onAdminReady executed");
|
|
14686
14701
|
return;
|
|
14687
14702
|
}
|
|
14688
14703
|
}
|
|
@@ -14696,7 +14711,6 @@ var samplePlugin2 = {
|
|
|
14696
14711
|
description: "Second MVP plugin demonstrating beforeDeploy hook",
|
|
14697
14712
|
hooks: {
|
|
14698
14713
|
beforeDeploy: (ctx) => {
|
|
14699
|
-
console.log("[Kyro Admin] sample-plugin-2 beforeDeploy");
|
|
14700
14714
|
return { success: true };
|
|
14701
14715
|
}
|
|
14702
14716
|
}
|
|
@@ -14987,7 +15001,6 @@ export function c(size) {
|
|
|
14987
15001
|
function debug(namespace) {
|
|
14988
15002
|
function d(...args) {
|
|
14989
15003
|
if (typeof localStorage !== "undefined" && localStorage.getItem("DEBUG")) {
|
|
14990
|
-
console.log(namespace, ...args);
|
|
14991
15004
|
}
|
|
14992
15005
|
}
|
|
14993
15006
|
d.enabled = false;
|
|
@@ -15007,9 +15020,34 @@ export default debug;
|
|
|
15007
15020
|
"kyro:config": resolvedConfig
|
|
15008
15021
|
}
|
|
15009
15022
|
},
|
|
15023
|
+
build: {
|
|
15024
|
+
rollupOptions: {
|
|
15025
|
+
output: {
|
|
15026
|
+
manualChunks(id) {
|
|
15027
|
+
if (id.includes("@tiptap") || id.includes("prosemirror")) {
|
|
15028
|
+
return "vendor-tiptap";
|
|
15029
|
+
}
|
|
15030
|
+
}
|
|
15031
|
+
}
|
|
15032
|
+
}
|
|
15033
|
+
},
|
|
15010
15034
|
optimizeDeps: {
|
|
15011
15035
|
include: [
|
|
15012
|
-
"
|
|
15036
|
+
"@kyro-cms/admin",
|
|
15037
|
+
"use-sync-external-store",
|
|
15038
|
+
"@tiptap/core",
|
|
15039
|
+
"@tiptap/react",
|
|
15040
|
+
"@tiptap/pm",
|
|
15041
|
+
"@tiptap/starter-kit",
|
|
15042
|
+
"@tiptap/extension-link",
|
|
15043
|
+
"@tiptap/extension-image",
|
|
15044
|
+
"@tiptap/extension-text-align",
|
|
15045
|
+
"@tiptap/extension-underline",
|
|
15046
|
+
"@tiptap/extension-highlight",
|
|
15047
|
+
"@tiptap/extension-task-list",
|
|
15048
|
+
"@tiptap/extension-task-item",
|
|
15049
|
+
"@tiptap/extension-text-style",
|
|
15050
|
+
"@tiptap/extension-color"
|
|
15013
15051
|
],
|
|
15014
15052
|
exclude: ["debug", "react/compiler-runtime"]
|
|
15015
15053
|
},
|
|
@@ -15019,7 +15057,31 @@ export default debug;
|
|
|
15019
15057
|
__KYRO_ADMIN_CONFIG_FILE__: JSON.stringify(configFile)
|
|
15020
15058
|
},
|
|
15021
15059
|
ssr: {
|
|
15022
|
-
noExternal: [
|
|
15060
|
+
noExternal: [
|
|
15061
|
+
"@kyro-cms/admin",
|
|
15062
|
+
"@kyro-cms/core",
|
|
15063
|
+
"@tiptap/core",
|
|
15064
|
+
"@tiptap/react",
|
|
15065
|
+
"@tiptap/pm",
|
|
15066
|
+
"@tiptap/starter-kit",
|
|
15067
|
+
"@tiptap/extension-link",
|
|
15068
|
+
"@tiptap/extension-image",
|
|
15069
|
+
"@tiptap/extension-text-align",
|
|
15070
|
+
"@tiptap/extension-underline",
|
|
15071
|
+
"@tiptap/extension-highlight",
|
|
15072
|
+
"@tiptap/extension-task-list",
|
|
15073
|
+
"@tiptap/extension-task-item",
|
|
15074
|
+
"@tiptap/extension-text-style",
|
|
15075
|
+
"@tiptap/extension-color",
|
|
15076
|
+
"prosemirror-model",
|
|
15077
|
+
"prosemirror-state",
|
|
15078
|
+
"prosemirror-view",
|
|
15079
|
+
"prosemirror-schema-list",
|
|
15080
|
+
"prosemirror-commands",
|
|
15081
|
+
"prosemirror-keymap",
|
|
15082
|
+
"prosemirror-transform",
|
|
15083
|
+
"prosemirror-inputrules"
|
|
15084
|
+
]
|
|
15023
15085
|
}
|
|
15024
15086
|
}
|
|
15025
15087
|
});
|