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

package/README.md

@@ -220,6 +220,35 @@ published: true
 2. 型を選択（テキスト、数値、真偽値、日付、JSON）
 3. 「追加」ボタンをクリック
 
+## ブロックのコピー&ペースト
+
+効率的なコンテンツ編集のために、ブロックのコピー&ペースト機能を利用できます。
+
+### 使い方
+
+1. **ブロックをコピー**
+   - コピーしたいブロックにマウスオーバーし、ブロックメニューを表示
+   - 「ブロックをコピー」ボタン（クリップボードアイコン）をクリック
+   - 確認メッセージが表示されます
+
+2. **ブロックをペースト**
+   - 「ブロックを追加」ボタンをクリックしてカタログダイアログを開く
+   - 上部に表示される「クリップボードから貼り付け」ボタンをクリック
+   - コピーしたブロックが挿入されます
+
+### 注意事項
+
+- コピーしたブロックは**ブラウザのタブ（セッション）内でのみ有効**です
+- タブを閉じるとクリップボードの内容は消去されます
+- 別のタブでコピーしたブロックは使用できません
+- ペースト後、クリップボードは自動的にクリアされます（再度使用するには再コピーが必要）
+
+### 活用例
+
+- テンプレートブロックの複製
+- 別ページへのブロック構造の流用
+- 繰り返しパターンの効率的な作成
+
 ## カスタムブロックカタログの追加
 
 既存のブロックカタログにカスタムブロックを追加できます：

package/dist/client.js

@@ -1296,7 +1296,7 @@ var style$b = "/* No Styling */\n";
 var template$b = "<a href=\"\" data-kind=\"primary\" data-before-icon=\"none\" data-after-icon=\"none\" data-bge=\"link:href, target:target, kind:data-kind, before-icon:data-before-icon, after-icon:data-after-icon\">\n\t<div>\n\t\t<span data-bge=\"text\">ボタン</span>\n\t\t<span data-bge=\"subtext\">サブテキスト</span>\n\t</div>\n</a>\n";
 
 var button = createItem$1({
-  version: "4.0.0-alpha.51",
+  version: "4.0.0-alpha.52",
   name: "button",
   template: template$b,
   style: style$b,
@@ -1352,7 +1352,7 @@ var style$a = "/* No Styling */\n";
 var template$a = "<details data-bge=\"open:open\">\n\t<summary data-bge=\"summary\">折りたたみコンテンツ</summary>\n\t<div data-bge=\"content\"><p>内容を入力してください</p></div>\n</details>\n";
 
 var details = createItem$1({
-  version: "4.0.0-alpha.51",
+  version: "4.0.0-alpha.52",
   name: "details",
   template: template$a,
   style: style$a,
@@ -1366,7 +1366,7 @@ var style$9 = "[data-bgi='download-file'] {\n\t[data-bge*='size'] {\n\t\t&::befo
 var template$9 = "<a href=\"./files/bgeditor/bg-sample.pdf\" target=\"_blank\" data-bge=\"path:href, download:download\">\n\t<div>\n\t\t<span data-bge=\"name\">サンプルダウンロードファイル</span>\n\t\t<span data-bge=\"formated-size, size:data-size\" data-size=\"138158\">134.92kB</span>\n\t</div>\n</a>\n";
 
 var downloadFile = createItem$1({
-  version: "4.0.0-alpha.51",
+  version: "4.0.0-alpha.52",
   name: "download-file",
   template: template$9,
   style: style$9,
@@ -1405,7 +1405,7 @@ var style$8 = "[data-bgi='google-maps'] {\n\tdiv {\n\t\tinline-size: 100%;\n\t\t
 var template$8 = "<div data-lat=\"35.681382\" data-lng=\"139.766084\" data-zoom=\"16\" data-bge=\"lat:data-lat, lng:data-lng, zoom:data-zoom\">\n\t<img data-bge=\"img:src\" src=\"https://maps.google.com/maps/api/staticmap?center=35.681382,139.766084&amp;zoom=16&amp;size=640x400&amp;markers=color:red|color:red|35.681382,139.766084&amp;scale=2&amp;key=%googleMapsApiKey%\" width=\"8\" height=\"5\" alt=\"Google Maps\" />\n</div>\n<a href=\"https://maps.apple.com/?q=35.681382,139.766084\" data-bge=\"url:href\" target=\"_blank\"><span>アプリで開く</span></a>\n";
 
 var googleMaps = createItem$1({
-  version: "4.0.0-alpha.51",
+  version: "4.0.0-alpha.52",
   name: "google-maps",
   template: template$8,
   style: style$8,
@@ -1540,7 +1540,7 @@ var style$7 = "[data-bgi='hr'] {\n\t--inline-size: 100%;\n\t--border-color: #000
 var template$7 = "<div data-bgi-hr-kind=\"primary\" data-bge=\"kind:data-bgi-hr-kind\">\n\t<hr />\n</div>\n";
 
 var hr = createItem$1({
-  version: "4.0.0-alpha.51",
+  version: "4.0.0-alpha.52",
   name: "hr",
   template: template$7,
   style: style$7,
@@ -1630,7 +1630,7 @@ function createWidthState() {
 
 const ORIGIN = "__org";
 var image = createItem$1({
-  version: "4.0.0-alpha.51",
+  version: "4.0.0-alpha.52",
   name: "image",
   template: template$6,
   style: style$6,
@@ -1828,7 +1828,7 @@ var style$5 = "[data-bgi='import'] {\n\tbge-import {\n\t\t&::before {\n\t\t\tfon
 var template$5 = "<bge-import data-bge=\":src\" src=\"\"></bge-import>\n";
 
 var importItem = createItem$1({
-  version: "4.0.0-alpha.51",
+  version: "4.0.0-alpha.52",
   name: "import",
   template: template$5,
   style: style$5,
@@ -1842,7 +1842,7 @@ var style$4 = "/* No Styling */\n";
 var template$4 = "<div data-bge=\":scrollable\" data-bge-scrollable=\"false\">\n\t<table>\n\t\t<caption data-bge=\"caption\">\n\t\t\tキャプションを入力してください\n\t\t</caption>\n\t\t<tbody data-bge-list>\n\t\t\t<tr>\n\t\t\t\t<th data-bge=\"th\">表組の見出し</th>\n\t\t\t\t<td data-bge=\"td\">表組の内容を入力してください</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n</div>\n";
 
 var table = createItem$1({
-  version: "4.0.0-alpha.51",
+  version: "4.0.0-alpha.52",
   name: "table",
   template: template$4,
   style: style$4,
@@ -1870,7 +1870,7 @@ var style$3 = "/* No Styling */\n";
 var template$3 = "<h2 data-bge=\"title-h2\">見出しを入力してください</h2>\n";
 
 var titleH2 = createItem$1({
-  version: "4.0.0-alpha.51",
+  version: "4.0.0-alpha.52",
   name: "title-h2",
   template: template$3,
   style: style$3,
@@ -1884,7 +1884,7 @@ var style$2 = "/* No Styling */\n";
 var template$2 = "<h3 data-bge=\"title-h3\">見出しを入力してください</h3>\n";
 
 var titleH3 = createItem$1({
-  version: "4.0.0-alpha.51",
+  version: "4.0.0-alpha.52",
   name: "title-h3",
   template: template$2,
   style: style$2,
@@ -1898,7 +1898,7 @@ var style$1 = "/* No Styling */\n";
 var template$1 = "<div data-bge=\"wysiwyg\"><p>本文を入力してください</p></div>\n";
 
 var wysiwyg = createItem$1({
-  version: "4.0.0-alpha.51",
+  version: "4.0.0-alpha.52",
   name: "wysiwyg",
   template: template$1,
   style: style$1,
@@ -1913,7 +1913,7 @@ var template = "<div data-id=\"3KtWfp0UopM\" data-title=\"YouTube動画\" data-w
 
 const FALLBACK_TITLE = "YouTube\u52D5\u753B";
 var youtube = createItem$1({
-  version: "4.0.0-alpha.51",
+  version: "4.0.0-alpha.52",
   name: "youtube",
   template,
   style: style$c,
@@ -37961,21 +37961,144 @@ function prop(props, key, flags2, fallback) {
     })
   );
 }
-var root_4$3 = /* @__PURE__ */ from_html(`<img alt="" loading="lazy" class="svelte-1hna6ki"/>`);
-var root_3$5 = /* @__PURE__ */ from_html(`<figure class="svelte-1hna6ki"><div class="img svelte-1hna6ki"><!></div> <figcaption class="svelte-1hna6ki"> </figcaption></figure>`);
-var root_2$3 = /* @__PURE__ */ from_html(`<dd class="svelte-1hna6ki"><button type="button" class="svelte-1hna6ki"><!></button></dd>`);
-var root_1$6 = /* @__PURE__ */ from_html(`<dt class="svelte-1hna6ki"> </dt> <div class="svelte-1hna6ki"></div>`, 1);
-var root$b = /* @__PURE__ */ 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 = /* @__PURE__ */ 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, ($$anchor2, $$item) => {
+    var $$array = /* @__PURE__ */ user_derived(() => to_array(get2($$item), 2));
+    let tag = () => get2($$array)[0];
+    let attrs = () => get2($$array)[1];
+    var fragment = comment();
+    var node_1 = first_child(fragment);
+    element(node_1, tag, true, ($$element, $$anchor3) => {
+      attribute_effect($$element, () => ({ ...attrs() }));
+    });
+    append2($$anchor2, fragment);
+  });
+  var node_2 = sibling(node);
+  slot(node_2, $$props, "default", {});
+  append2($$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: ($$anchor2, $$slotProps) => {
+      var fragment_1 = comment();
+      var node = first_child(fragment_1);
+      slot(node, $$props, "default", {});
+      append2($$anchor2, fragment_1);
+    },
+    $$slots: { default: true }
+  }));
+}
+var root_1$6 = /* @__PURE__ */ 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 = /* @__PURE__ */ from_html(`<img alt="" loading="lazy" class="svelte-1hna6ki"/>`);
+var root_4$3 = /* @__PURE__ */ from_html(`<figure class="svelte-1hna6ki"><div class="img svelte-1hna6ki"><!></div> <figcaption class="svelte-1hna6ki"> </figcaption></figure>`);
+var root_3$5 = /* @__PURE__ */ from_html(`<dd class="svelte-1hna6ki"><button type="button" class="svelte-1hna6ki"><!></button></dd>`);
+var root_2$3 = /* @__PURE__ */ from_html(`<dt class="svelte-1hna6ki"> </dt> <div class="svelte-1hna6ki"></div>`, 1);
+var root$a = /* @__PURE__ */ 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 = /* @__PURE__ */ mutable_source(false);
+  set(hasCopiedBlock, !!sessionStorage.getItem(engine().storageKey.blockClipboard));
   function addBlock(blockData) {
     engine().blockCatalogDialog.close();
     engine().addBlock(blockData);
   }
+  async function pasteBlock() {
+    const jsonString = sessionStorage.getItem(engine().storageKey.blockClipboard);
+    if (!jsonString) {
+      alert("クリップボードにブロックデータがありません。");
+      return;
+    }
+    let blockData;
+    try {
+      blockData = JSON.parse(jsonString);
+    } catch (error) {
+      console.error("Invalid JSON in clipboard:", error);
+      alert("ブロックの貼り付けに失敗しました。\nクリップボードのデータが破損している可能性があります。\nもう一度ブロックをコピーしてください。");
+      return;
+    }
+    engine().blockCatalogDialog.close();
+    await engine().addBlock(blockData);
+    sessionStorage.removeItem(engine().storageKey.blockClipboard);
+  }
   init();
-  var div = root$b();
-  var dl = child(div);
+  var div = root$a();
+  var node = child(div);
+  {
+    var consequent = ($$anchor2) => {
+      var div_1 = root_1$6();
+      var button = child(div_1);
+      var node_1 = child(button);
+      Clipboard(node_1, {});
+      event("click", button, pasteBlock);
+      append2($$anchor2, div_1);
+    };
+    if_block(node, ($$render) => {
+      if (get2(hasCopiedBlock)) $$render(consequent);
+    });
+  }
+  var dl = sibling(node, 2);
   each(
     dl,
     5,
@@ -37985,51 +38108,51 @@ function Block_catalog($$anchor, $$props) {
       var $$array = /* @__PURE__ */ user_derived(() => to_array(get2($$item), 2));
       let category = () => get2($$array)[0];
       let blocks = () => get2($$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);
-      each(div_1, 5, blocks, (blockInfo) => category() + blockInfo.label + blockInfo.definition.name, ($$anchor3, blockInfo) => {
-        var dd = root_2$3();
-        var button = child(dd);
-        var node = child(button);
+      var div_2 = sibling(dt, 2);
+      each(div_2, 5, blocks, (blockInfo) => category() + blockInfo.label + blockInfo.definition.name, ($$anchor3, blockInfo) => {
+        var dd = root_3$5();
+        var button_1 = child(dd);
+        var node_2 = child(button_1);
         {
-          var consequent_2 = ($$anchor4) => {
-            var figure = root_3$5();
-            var div_2 = child(figure);
-            var node_1 = child(div_2);
+          var consequent_3 = ($$anchor4) => {
+            var figure = root_4$3();
+            var div_3 = child(figure);
+            var node_3 = child(div_3);
             {
-              var consequent = ($$anchor5) => {
-                var img = root_4$3();
+              var consequent_1 = ($$anchor5) => {
+                var img = root_5$4();
                 template_effect(() => set_attribute(img, "src", (get2(blockInfo), untrack(() => get2(blockInfo).definition.img))));
                 append2($$anchor5, img);
               };
               var alternate = ($$anchor5) => {
                 var fragment_1 = comment();
-                var node_2 = first_child(fragment_1);
+                var node_4 = first_child(fragment_1);
                 {
-                  var consequent_1 = ($$anchor6) => {
+                  var consequent_2 = ($$anchor6) => {
                     var fragment_2 = comment();
-                    var node_3 = first_child(fragment_2);
-                    html(node_3, () => (get2(blockInfo), untrack(() => get2(blockInfo).definition.svg)));
+                    var node_5 = first_child(fragment_2);
+                    html(node_5, () => (get2(blockInfo), untrack(() => get2(blockInfo).definition.svg)));
                     append2($$anchor6, fragment_2);
                   };
                   if_block(
-                    node_2,
+                    node_4,
                     ($$render) => {
-                      if (get2(blockInfo), untrack(() => get2(blockInfo).definition.svg)) $$render(consequent_1);
+                      if (get2(blockInfo), untrack(() => get2(blockInfo).definition.svg)) $$render(consequent_2);
                     },
                     true
                   );
                 }
                 append2($$anchor5, fragment_1);
               };
-              if_block(node_1, ($$render) => {
-                if (get2(blockInfo), untrack(() => get2(blockInfo).definition.img)) $$render(consequent);
+              if_block(node_3, ($$render) => {
+                if (get2(blockInfo), untrack(() => get2(blockInfo).definition.img)) $$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, (get2(blockInfo), untrack(() => get2(blockInfo).label))));
             append2($$anchor4, figure);
@@ -38039,12 +38162,12 @@ function Block_catalog($$anchor, $$props) {
             template_effect(() => set_text(text_2, (get2(blockInfo), untrack(() => get2(blockInfo).label))));
             append2($$anchor4, text_2);
           };
-          if_block(node, ($$render) => {
-            if (get2(blockInfo), untrack(() => get2(blockInfo).definition.img || get2(blockInfo).definition.svg)) $$render(consequent_2);
+          if_block(node_2, ($$render) => {
+            if (get2(blockInfo), untrack(() => get2(blockInfo).definition.img || get2(blockInfo).definition.svg)) $$render(consequent_3);
             else $$render(alternate_1, false);
           });
         }
-        event("click", button, () => addBlock(get2(blockInfo).definition));
+        event("click", button_1, () => addBlock(get2(blockInfo).definition));
         append2($$anchor3, dd);
       });
       template_effect(() => set_text(text$1, category()));
@@ -38054,65 +38177,6 @@ function Block_catalog($$anchor, $$props) {
   append2($$anchor, div);
   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 = /* @__PURE__ */ 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, ($$anchor2, $$item) => {
-    var $$array = /* @__PURE__ */ user_derived(() => to_array(get2($$item), 2));
-    let tag = () => get2($$array)[0];
-    let attrs = () => get2($$array)[1];
-    var fragment = comment();
-    var node_1 = first_child(fragment);
-    element(node_1, tag, true, ($$element, $$anchor3) => {
-      attribute_effect($$element, () => ({ ...attrs() }));
-    });
-    append2($$anchor2, fragment);
-  });
-  var node_2 = sibling(node);
-  slot(node_2, $$props, "default", {});
-  append2($$anchor, svg);
-  pop();
-}
 function Arrow_big_down_line($$anchor, $$props) {
   const $$sanitized_props = legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
   const iconNode = [
@@ -38537,8 +38601,8 @@ function Block_menu($$anchor, $$props) {
     if (engine().isProcessed || !get2(currentBlock)) {
       return;
     }
-    const html2 = get2(currentBlock).getHTMLStringify();
-    sessionStorage.setItem(engine().storageKey.blockClipboard, html2);
+    const json = get2(currentBlock).toJSONStringify();
+    sessionStorage.setItem(engine().storageKey.blockClipboard, json);
     alert("ブロックをコピーしました。\nブロックの追加ボタンからペースト（貼り付け）することができます。");
   }
   legacy_pre_effect(() => get2(currentBlock), () => {