diff --git a/src/app/components/Octicon.tsx b/src/app/components/Octicon.tsx index 6df56ae5..cb89dad0 100644 --- a/src/app/components/Octicon.tsx +++ b/src/app/components/Octicon.tsx @@ -11,6 +11,7 @@ export const Octicon = { dash: , device_desktop: , download: , + duplicate: , eye: , eye_closed: , gear: , diff --git a/src/app/schema/renderHtml.tsx b/src/app/schema/renderHtml.tsx index 59d0b0da..1162f4c3 100644 --- a/src/app/schema/renderHtml.tsx +++ b/src/app/schema/renderHtml.tsx @@ -145,7 +145,18 @@ const renderHtml: RenderHook = { [v[index + 1], v[index]] = [v[index], v[index + 1]] path.model.set(path, v) } - return + const actions: MenuAction[] = [ + { + icon: 'duplicate', + label: 'duplicate', + onSelect: () => { + const v = [...path.get()] + v.splice(index, 0, { id: hexId(), node: deepClone(cValue) }) + path.model.set(path, v) + }, + }, + ] + return {canToggle && } {value.length > 1 &&
@@ -390,6 +401,13 @@ function StringSuffix({ path, getValues, config, node, value, lang, states }: No } } +type MenuAction = { + label: string, + description?: string, + icon: keyof typeof Octicon, + onSelect: () => unknown, +} + type TreeNodeProps = { schema: INode, path: ModelPath, @@ -399,9 +417,10 @@ type TreeNodeProps = { ctx: Record, compare?: any, label?: string, + actions?: MenuAction[], children?: ComponentChildren, } -function TreeNode({ label, schema, path, value, lang, states, ctx, children }: TreeNodeProps) { +function TreeNode({ label, schema, path, value, lang, states, ctx, actions, children }: TreeNodeProps) { const type = schema.type(path) const category = schema.category(path) const context = path.getContext().join('.') @@ -416,18 +435,21 @@ function TreeNode({ label, schema, path, value, lang, states, ctx, children }: T delete newCtx.index const [prefix, suffix, body] = schema.hook(renderHtml, path, value, lang, states, newCtx) return
-
+
{children} {prefix} -