@burger-editor/client 4.0.0-alpha.52 → 4.0.0-alpha.53

package/README.md

@@ -219,6 +219,52 @@ await createBurgerEditorClient({
 });
 ```
 
+## ブロックのコピー&ペースト
+
+BurgerEditorは、ブロック単位でのコピー&ペースト機能を提供します。
+
+### 使用方法
+
+1. **ブロックのコピー**
+   - コピーしたいブロックを選択
+   - ブロックメニューから「ブロックをコピー」をクリック
+   - ブロックのデータがクリップボード（sessionStorage）に保存されます
+
+2. **ブロックのペースト**
+   - ブロック追加ダイアログを開く
+   - クリップボードにデータがある場合、「クリップボードから貼り付け」ボタンが表示されます
+   - ボタンをクリックすると、コピーしたブロックが挿入されます
+
+### 仕様
+
+- **保存形式**: JSON形式（BlockData）
+- **保存先**: sessionStorage
+- **有効期限**: ブラウザセッション内のみ（タブを閉じると消去）
+- **保存キー**: `engine.storageKey.blockClipboard`（デフォルト: `'bge-copied-block'`）
+- **動作**: ペースト後、クリップボードは自動的にクリアされます
+
+### ストレージキーのカスタマイズ
+
+```typescript
+await createBurgerEditorClient({
+	root: '.editor',
+	config: {
+		classList: [],
+		stylesheets: [],
+		sampleImagePath: '/images/sample.jpg',
+		sampleFilePath: '/files/sample.pdf',
+		googleMapsApiKey: null,
+	},
+	items,
+	catalog: defaultCatalog,
+	generalCSS,
+	initialContents: '<div></div>',
+	storageKey: {
+		blockClipboard: 'my-custom-clipboard-key', // カスタムキー
+	},
+});
+```
+
 ## 詳細なAPI仕様
 
 ブロックの構造やアイテムの作成方法など、より詳細な技術仕様については [@burger-editor/core のREADME](../core/README.md) を参照してください。

package/dist/client.css

@@ -55,6 +55,47 @@
 		text-align: center;
 	}
 
+	/* ペーストセクション */
+	.paste-section.svelte-1hna6ki {
+		padding-block-end: 1em;
+		margin-block-end: 1em;
+		border-block-end: 2px solid var(--bge-ui-primary-color, #4a90e2);
+	}
+
+	.paste-button.svelte-1hna6ki {
+		display: flex;
+		gap: 0.5em;
+		align-items: center;
+		justify-content: center;
+		inline-size: 100%;
+		padding-block: 0.8em;
+		padding-inline: 1em;
+		font-size: 1em;
+		font-weight: bold;
+		color: var(--bge-lightest-color, #fff);
+		cursor: pointer;
+		background-color: var(--bge-ui-primary-color, #4a90e2);
+		border: none;
+		border-radius: 4px;
+		transition: background-color 0.2s ease;
+	}
+
+	.paste-button.svelte-1hna6ki:hover {
+		background-color: color-mix(
+			in srgb,
+			var(--bge-ui-primary-color, #4a90e2) 80%,
+			var(--bge-darkest-color, #000) 20%
+		);
+	}
+
+	.paste-button.svelte-1hna6ki:active {
+		translate: 0 1px;
+	}
+
+	.paste-button.svelte-1hna6ki span:where(.svelte-1hna6ki) {
+		font-size: 0.95em;
+	}
+
 	button.svelte-4wfsd1 {
 		anchor-name: var(--name);
 		display: block;

package/dist/client.js

@@ -41403,16 +41403,140 @@ function prop(props, key, flags, fallback) {
 	);
 }
 
-var root_4$3 = from_html(`<img alt="" loading="lazy" class="svelte-1hna6ki"/>`);
-var root_3$5 = from_html(`<figure class="svelte-1hna6ki"><div class="img svelte-1hna6ki"><!></div> <figcaption class="svelte-1hna6ki"> </figcaption></figure>`);
-var root_2$3 = from_html(`<dd class="svelte-1hna6ki"><button type="button" class="svelte-1hna6ki"><!></button></dd>`);
-var root_1$6 = from_html(`<dt class="svelte-1hna6ki"> </dt> <div class="svelte-1hna6ki"></div>`, 1);
-var root$b = from_html(`<div class="block-catalog"><dl class="svelte-1hna6ki"></dl></div>`);
+const defaultAttributes = {
+    outline: {
+        xmlns: 'http://www.w3.org/2000/svg',
+        width: 24,
+        height: 24,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        'stroke-width': 2,
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+    },
+    filled: {
+        xmlns: 'http://www.w3.org/2000/svg',
+        width: 24,
+        height: 24,
+        viewBox: '0 0 24 24',
+        fill: 'currentColor',
+        stroke: 'none'
+    },
+};
+
+var root$b = from_svg(`<svg><!><!></svg>`);
+
+function Icon($$anchor, $$props) {
+	const $$sanitized_props = legacy_rest_props($$props, ['children', '$$slots', '$$events', '$$legacy']);
+	const $$restProps = legacy_rest_props($$sanitized_props, ['type', 'name', 'color', 'size', 'stroke', 'iconNode']);
+
+	push($$props, false);
+
+	let type = prop($$props, 'type', 8);
+	let name = prop($$props, 'name', 8);
+	let color = prop($$props, 'color', 8, 'currentColor');
+	let size = prop($$props, 'size', 8, 24);
+	let stroke = prop($$props, 'stroke', 8, 2);
+	let iconNode = prop($$props, 'iconNode', 8);
+
+	init();
+
+	var svg = root$b();
+
+	attribute_effect(svg, () => ({
+		...defaultAttributes[type()],
+		...$$restProps,
+		width: size(),
+		height: size(),
+
+		class: (
+			deep_read_state(name()),
+			deep_read_state($$sanitized_props),
+			untrack(() => `tabler-icon tabler-icon-${name()} ${$$sanitized_props.class ?? ''}`)
+		),
+
+		...type() === 'filled'
+			? { fill: color() }
+			: { 'stroke-width': stroke(), stroke: color() }
+	}));
+
+	var node = child(svg);
+
+	each(node, 1, iconNode, index, ($$anchor, $$item) => {
+		var $$array = user_derived(() => to_array(get($$item), 2));
+		let tag = () => get($$array)[0];
+		let attrs = () => get($$array)[1];
+		var fragment = comment();
+		var node_1 = first_child(fragment);
+
+		element(node_1, tag, true, ($$element, $$anchor) => {
+			attribute_effect($$element, () => ({ ...attrs() }));
+		});
+
+		append($$anchor, fragment);
+	});
+
+	var node_2 = sibling(node);
+
+	slot(node_2, $$props, 'default', {});
+	append($$anchor, svg);
+	pop();
+}
+
+function Clipboard($$anchor, $$props) {
+	const $$sanitized_props = legacy_rest_props($$props, ['children', '$$slots', '$$events', '$$legacy']);
+
+	const iconNode = [
+		[
+			"path",
+
+			{
+				"d": "M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"
+			}
+		],
+
+		[
+			"path",
+
+			{
+				"d": "M9 5a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2"
+			}
+		]
+	];
+
+	Icon($$anchor, spread_props({ type: 'outline', name: 'clipboard' }, () => $$sanitized_props, {
+		get iconNode() {
+			return iconNode;
+		},
+
+		children: ($$anchor, $$slotProps) => {
+			var fragment_1 = comment();
+			var node = first_child(fragment_1);
+
+			slot(node, $$props, 'default', {});
+			append($$anchor, fragment_1);
+		},
+
+		$$slots: { default: true }
+	}));
+}
+
+var root_1$6 = from_html(`<div class="paste-section svelte-1hna6ki"><button type="button" class="paste-button svelte-1hna6ki"><!> <span class="svelte-1hna6ki">クリップボードから貼り付け</span></button></div>`);
+var root_5$4 = from_html(`<img alt="" loading="lazy" class="svelte-1hna6ki"/>`);
+var root_4$3 = from_html(`<figure class="svelte-1hna6ki"><div class="img svelte-1hna6ki"><!></div> <figcaption class="svelte-1hna6ki"> </figcaption></figure>`);
+var root_3$5 = from_html(`<dd class="svelte-1hna6ki"><button type="button" class="svelte-1hna6ki"><!></button></dd>`);
+var root_2$3 = from_html(`<dt class="svelte-1hna6ki"> </dt> <div class="svelte-1hna6ki"></div>`, 1);
+var root$a = from_html(`<div class="block-catalog"><!> <dl class="svelte-1hna6ki"></dl></div>`);
 
 function Block_catalog($$anchor, $$props) {
 	push($$props, false);
 
 	let engine = prop($$props, 'engine', 8);
+	let hasCopiedBlock = mutable_source(false);
+
+	// コンポーネント初期化時にsessionStorageをチェック
+	set(hasCopiedBlock, !!sessionStorage.getItem(engine().storageKey.blockClipboard));
 
 	/**
 	 *
@@ -41423,10 +41547,65 @@ function Block_catalog($$anchor, $$props) {
 		engine().addBlock(blockData);
 	}
 
+	/**
+	 * クリップボードからブロックをペースト
+	 */
+	async function pasteBlock() {
+		// 1. sessionStorageから取得
+		const jsonString = sessionStorage.getItem(engine().storageKey.blockClipboard);
+
+		if (!jsonString) {
+			alert('クリップボードにブロックデータがありません。');
+
+			return;
+		}
+
+		// 2. JSONをBlockDataにパース
+		let blockData;
+
+		try {
+			blockData = JSON.parse(jsonString);
+		} catch(error) {
+			// eslint-disable-next-line no-console
+			console.error('Invalid JSON in clipboard:', error);
+
+			alert('ブロックの貼り付けに失敗しました。\n' + 'クリップボードのデータが破損している可能性があります。\n' + 'もう一度ブロックをコピーしてください。');
+
+			return;
+		}
+
+		// 3. ダイアログを閉じる
+		engine().blockCatalogDialog.close();
+
+		// 4. ブロックを追加（既存のaddBlock関数と同じ）
+		await engine().addBlock(blockData);
+
+		// 5. sessionStorageをクリア
+		sessionStorage.removeItem(engine().storageKey.blockClipboard);
+	}
+
 	init();
 
-	var div = root$b();
-	var dl = child(div);
+	var div = root$a();
+	var node = child(div);
+
+	{
+		var consequent = ($$anchor) => {
+			var div_1 = root_1$6();
+			var button = child(div_1);
+			var node_1 = child(button);
+
+			Clipboard(node_1, {});
+			event('click', button, pasteBlock);
+			append($$anchor, div_1);
+		};
+
+		if_block(node, ($$render) => {
+			if (get(hasCopiedBlock)) $$render(consequent);
+		});
+	}
+
+	var dl = sibling(node, 2);
 
 	each(
 		dl,
@@ -41440,26 +41619,26 @@ function Block_catalog($$anchor, $$props) {
 			var $$array = user_derived(() => to_array(get($$item), 2));
 			let category = () => get($$array)[0];
 			let blocks = () => get($$array)[1];
-			var fragment = root_1$6();
+			var fragment = root_2$3();
 			var dt = first_child(fragment);
 			var text$1 = child(dt);
 
-			var div_1 = sibling(dt, 2);
+			var div_2 = sibling(dt, 2);
 
-			each(div_1, 5, blocks, (blockInfo) => category() + blockInfo.label + blockInfo.definition.name, ($$anchor, blockInfo) => {
-				var dd = root_2$3();
-				var button = child(dd);
-				var node = child(button);
+			each(div_2, 5, blocks, (blockInfo) => category() + blockInfo.label + blockInfo.definition.name, ($$anchor, blockInfo) => {
+				var dd = root_3$5();
+				var button_1 = child(dd);
+				var node_2 = child(button_1);
 
 				{
-					var consequent_2 = ($$anchor) => {
-						var figure = root_3$5();
-						var div_2 = child(figure);
-						var node_1 = child(div_2);
+					var consequent_3 = ($$anchor) => {
+						var figure = root_4$3();
+						var div_3 = child(figure);
+						var node_3 = child(div_3);
 
 						{
-							var consequent = ($$anchor) => {
-								var img = root_4$3();
+							var consequent_1 = ($$anchor) => {
+								var img = root_5$4();
 
 								template_effect(() => set_attribute(img, 'src', (
 									get(blockInfo),
@@ -41471,14 +41650,14 @@ function Block_catalog($$anchor, $$props) {
 
 							var alternate = ($$anchor) => {
 								var fragment_1 = comment();
-								var node_2 = first_child(fragment_1);
+								var node_4 = first_child(fragment_1);
 
 								{
-									var consequent_1 = ($$anchor) => {
+									var consequent_2 = ($$anchor) => {
 										var fragment_2 = comment();
-										var node_3 = first_child(fragment_2);
+										var node_5 = first_child(fragment_2);
 
-										html(node_3, () => (
+										html(node_5, () => (
 											get(blockInfo),
 											untrack(() => get(blockInfo).definition.svg)
 										));
@@ -41487,12 +41666,12 @@ function Block_catalog($$anchor, $$props) {
 									};
 
 									if_block(
-										node_2,
+										node_4,
 										($$render) => {
 											if ((
 												get(blockInfo),
 												untrack(() => get(blockInfo).definition.svg)
-											)) $$render(consequent_1);
+											)) $$render(consequent_2);
 										},
 										true
 									);
@@ -41501,15 +41680,15 @@ function Block_catalog($$anchor, $$props) {
 								append($$anchor, fragment_1);
 							};
 
-							if_block(node_1, ($$render) => {
+							if_block(node_3, ($$render) => {
 								if ((
 									get(blockInfo),
 									untrack(() => get(blockInfo).definition.img)
-								)) $$render(consequent); else $$render(alternate, false);
+								)) $$render(consequent_1); else $$render(alternate, false);
 							});
 						}
 
-						var figcaption = sibling(div_2, 2);
+						var figcaption = sibling(div_3, 2);
 						var text_1 = child(figcaption);
 						template_effect(() => set_text(text_1, (get(blockInfo), untrack(() => get(blockInfo).label))));
 						append($$anchor, figure);
@@ -41522,14 +41701,14 @@ function Block_catalog($$anchor, $$props) {
 						append($$anchor, text_2);
 					};
 
-					if_block(node, ($$render) => {
+					if_block(node_2, ($$render) => {
 						if ((
 							get(blockInfo),
 							untrack(() => get(blockInfo).definition.img || get(blockInfo).definition.svg)
-						)) $$render(consequent_2); else $$render(alternate_1, false);
+						)) $$render(consequent_3); else $$render(alternate_1, false);
 					});
 				}
-				event('click', button, () => addBlock(get(blockInfo).definition));
+				event('click', button_1, () => addBlock(get(blockInfo).definition));
 				append($$anchor, dd);
 			});
 			template_effect(() => set_text(text$1, category()));
@@ -41540,87 +41719,6 @@ function Block_catalog($$anchor, $$props) {
 	pop();
 }
 
-const defaultAttributes = {
-    outline: {
-        xmlns: 'http://www.w3.org/2000/svg',
-        width: 24,
-        height: 24,
-        viewBox: '0 0 24 24',
-        fill: 'none',
-        stroke: 'currentColor',
-        'stroke-width': 2,
-        'stroke-linecap': 'round',
-        'stroke-linejoin': 'round',
-    },
-    filled: {
-        xmlns: 'http://www.w3.org/2000/svg',
-        width: 24,
-        height: 24,
-        viewBox: '0 0 24 24',
-        fill: 'currentColor',
-        stroke: 'none'
-    },
-};
-
-var root$a = from_svg(`<svg><!><!></svg>`);
-
-function Icon($$anchor, $$props) {
-	const $$sanitized_props = legacy_rest_props($$props, ['children', '$$slots', '$$events', '$$legacy']);
-	const $$restProps = legacy_rest_props($$sanitized_props, ['type', 'name', 'color', 'size', 'stroke', 'iconNode']);
-
-	push($$props, false);
-
-	let type = prop($$props, 'type', 8);
-	let name = prop($$props, 'name', 8);
-	let color = prop($$props, 'color', 8, 'currentColor');
-	let size = prop($$props, 'size', 8, 24);
-	let stroke = prop($$props, 'stroke', 8, 2);
-	let iconNode = prop($$props, 'iconNode', 8);
-
-	init();
-
-	var svg = root$a();
-
-	attribute_effect(svg, () => ({
-		...defaultAttributes[type()],
-		...$$restProps,
-		width: size(),
-		height: size(),
-
-		class: (
-			deep_read_state(name()),
-			deep_read_state($$sanitized_props),
-			untrack(() => `tabler-icon tabler-icon-${name()} ${$$sanitized_props.class ?? ''}`)
-		),
-
-		...type() === 'filled'
-			? { fill: color() }
-			: { 'stroke-width': stroke(), stroke: color() }
-	}));
-
-	var node = child(svg);
-
-	each(node, 1, iconNode, index, ($$anchor, $$item) => {
-		var $$array = user_derived(() => to_array(get($$item), 2));
-		let tag = () => get($$array)[0];
-		let attrs = () => get($$array)[1];
-		var fragment = comment();
-		var node_1 = first_child(fragment);
-
-		element(node_1, tag, true, ($$element, $$anchor) => {
-			attribute_effect($$element, () => ({ ...attrs() }));
-		});
-
-		append($$anchor, fragment);
-	});
-
-	var node_2 = sibling(node);
-
-	slot(node_2, $$props, 'default', {});
-	append($$anchor, svg);
-	pop();
-}
-
 function Arrow_big_down_line($$anchor, $$props) {
 	const $$sanitized_props = legacy_rest_props($$props, ['children', '$$slots', '$$events', '$$legacy']);
 
@@ -42184,9 +42282,9 @@ function Block_menu($$anchor, $$props) {
 		// 	);
 		// 	return;
 		// }
-		const html = get(currentBlock).getHTMLStringify();
+		const json = get(currentBlock).toJSONStringify();
 
-		sessionStorage.setItem(engine().storageKey.blockClipboard, html);
+		sessionStorage.setItem(engine().storageKey.blockClipboard, json);
 		alert('ブロックをコピーしました。\nブロックの追加ボタンからペースト（貼り付け）することができます。');
 	}
 
@@ -44324,7 +44422,7 @@ function parseConfig(config) {
   }
 }
 
-const version = "4.0.0-alpha.51";
+const version = "4.0.0-alpha.52";
 function attachDraftSwitcher(engine) {
   if (engine.hasDraft()) {
     const container = document.createElement("div");