@burger-editor/blocks 4.0.0-alpha.30 → 4.0.0-alpha.31

package/README.md

@@ -76,3 +76,9 @@ const wysiwygItem = items.wysiwyg;
 // ブロックカタログの使用
 const catalog = defaultCatalog;
 ```
+
+## カスタムアイテムの作成
+
+独自のアイテムを作成する場合は、[@burger-editor/core](../core/README.md)の`createItem`関数を使用します。
+
+> **📖 エディターAPIの詳細**: アイテムエディターのAPIの使い方と実践的なユースケースについては、[アイテムエディターAPIガイド](../../../docs/item-editor-api.md)を参照してください。

package/dist/index.js

@@ -1,5 +1,6 @@
 import { createItem } from '@burger-editor/core';
 import { mergeItems, formatByteSize, markdownToHtml, htmlToMarkdown, parseYTId } from '@burger-editor/utils';
+import { updateRatio } from '@d-zero/shared/ratio-value';
 
 var editor$b = "<div>\n\t<fieldset>\n\t\t<legend>リンク</legend>\n\t\t<label>\n\t\t\t<span>URL</span>\n\t\t\t<input type=\"text\" name=\"bge-link\" />\n\t\t</label>\n\t\t<label>\n\t\t\t<span>ターゲット</span>\n\t\t\t<select name=\"bge-target\">\n\t\t\t\t<option value=\"\">指定なし</option>\n\t\t\t\t<option value=\"_blank\">新しいウィンドウ(_blank)</option>\n\t\t\t\t<option value=\"_top\">最上部ウィンドウ(_top)</option>\n\t\t\t\t<option value=\"_self\">同じウィンドウ(_self)</option>\n\t\t\t</select>\n\t\t</label>\n\t</fieldset>\n\t<label>\n\t\t<span>テキスト</span>\n\t\t<input type=\"text\" name=\"bge-text\" />\n\t</label>\n\t<label>\n\t\t<span>サブテキスト</span>\n\t\t<input type=\"text\" name=\"bge-subtext\" />\n\t</label>\n\t<label>\n\t\t<span>ボタンのスタイル</span>\n\t\t<select name=\"bge-kind\">\n\t\t\t<!-- 選択肢はJavaScriptで動的に生成されます -->\n\t\t</select>\n\t</label>\n\t<fieldset>\n\t\t<legend>アイコン</legend>\n\t\t<label>\n\t\t\t<span>前</span>\n\t\t\t<select name=\"bge-before-icon\">\n\t\t\t\t<!-- 選択肢はJavaScriptで動的に生成されます -->\n\t\t\t</select>\n\t\t</label>\n\t\t<label>\n\t\t\t<span>後</span>\n\t\t\t<select name=\"bge-after-icon\">\n\t\t\t\t<!-- 選択肢はJavaScriptで動的に生成されます -->\n\t\t\t</select>\n\t\t</label>\n\t</fieldset>\n</div>\n";
 
@@ -8,7 +9,7 @@ var style$b = "/* No Styling */\n";
 var template$b = "<a href=\"\" data-kind=\"link\" 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({
-  version: "4.0.0-alpha.29",
+  version: "4.0.0-alpha.30",
   name: "button",
   template: template$b,
   style: style$b,
@@ -64,7 +65,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({
-  version: "4.0.0-alpha.29",
+  version: "4.0.0-alpha.30",
   name: "details",
   template: template$a,
   style: style$a,
@@ -78,7 +79,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({
-  version: "4.0.0-alpha.29",
+  version: "4.0.0-alpha.30",
   name: "download-file",
   template: template$9,
   style: style$9,
@@ -117,7 +118,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({
-  version: "4.0.0-alpha.29",
+  version: "4.0.0-alpha.30",
   name: "google-maps",
   template: template$8,
   style: style$8,
@@ -252,22 +253,96 @@ 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({
-  version: "4.0.0-alpha.29",
+  version: "4.0.0-alpha.30",
   name: "hr",
   template: template$7,
   style: style$7,
   editor: editor$7
 });
 
-var editor$6 = "<div data-bge-dialog=\"2col\">\n\t<div data-bge-dialog-ui=\"sticky\">\n\t\t<div>\n\t\t\t<div data-bge-editor-ui=\"tabs\" data-bge-editor-ui-for=\"bgi-image__tabs-content\"></div>\n\n\t\t\t<div id=\"bgi-image__tabs-content\" role=\"tabpanel\" aria-label=\"画像\">\n\t\t\t\t<div data-bge-editor-ui=\"preview\"></div>\n\t\t\t\t<input type=\"hidden\" name=\"bge-path[]\" />\n\t\t\t\t<input type=\"hidden\" name=\"bge-alt[]\" />\n\t\t\t\t<input type=\"hidden\" name=\"bge-width[]\" />\n\t\t\t\t<input type=\"hidden\" name=\"bge-height[]\" />\n\t\t\t\t<input type=\"hidden\" name=\"bge-media[]\" />\n\n\t\t\t\t<input type=\"hidden\" name=\"bge-file-size\" />\n\t\t\t\t<div>\n\t\t\t\t\t<label>\n\t\t\t\t\t\t<span>メディアクエリー</span>\n\t\t\t\t\t\t<input type=\"text\" name=\"bge-media-input\" />\n\t\t\t\t\t</label>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div>\n\t\t\t<fieldset>\n\t\t\t\t<legend>画像のサイズ</legend>\n\t\t\t\t<div role=\"radiogroup\" aria-labelledby=\"bgi-image__radio-group1\">\n\t\t\t\t\t<div id=\"bgi-image__radio-group1\">基準</div>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-scale-type\" value=\"container\" /><span>基準</span></label>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-scale-type\" value=\"original\" checked />画像基準</label>\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<label for=\"bgi-image__range\">幅</label>\n\t\t\t\t\t\t<output name=\"bge-css-width\"></output>\n\t\t\t\t\t</span>\n\t\t\t\t\t<input id=\"bgi-image__range\" type=\"range\" name=\"bge-scale\" min=\"1\" max=\"100\" step=\"1\" value=\"100\" />\n\t\t\t\t</div>\n\t\t\t\t<div role=\"radiogroup\" aria-labelledby=\"bgi-image__radio-group2\">\n\t\t\t\t\t<div id=\"bgi-image__radio-group2\">縦横比</div>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-aspect-ratio\" value=\"unset\" checked />オリジナル</label>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-aspect-ratio\" value=\"1/1\" />1 : 1</label>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-aspect-ratio\" value=\"4/3\" />4 : 3</label>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-aspect-ratio\" value=\"16/9\" />16 : 9</label>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t\t<label>\n\t\t\t\t<span>画像の代替テキスト(alt)</span>\n\t\t\t\t<input type=\"text\" name=\"bge-alt-editable\" />\n\t\t\t</label>\n\t\t\t<label>\n\t\t\t\t<span>キャプション</span>\n\t\t\t\t<input type=\"text\" name=\"bge-caption\" />\n\t\t\t</label>\n\t\t\t<fieldset>\n\t\t\t\t<legend>リンク</legend>\n\t\t\t\t<label><input type=\"checkbox\" name=\"bge-popup\" />ポップアップで画像を開く</label>\n\t\t\t\t<label>\n\t\t\t\t\t<span>リンク先URL</span>\n\t\t\t\t\t<input type=\"url\" name=\"bge-href\" />\n\t\t\t\t</label>\n\t\t\t\t<label><input type=\"checkbox\" name=\"bge-target-blank\" />別タブで開く</label>\n\t\t\t</fieldset>\n\t\t\t<label><input type=\"checkbox\" name=\"bge-lazy\" checked aria-describedby=\"bge-lazy-desc\" />遅延読み込み</label>\n\t\t\t<small id=\"bge-lazy-desc\">画像がブラウザの表示エリアに現れるまでファイルを読み込みません。</small>\n\t\t</div>\n\t</div>\n\t<div>\n\t\t<div data-bge-editor-ui=\"imageUploader\"></div>\n\t\t<div data-bge-editor-ui=\"imageList\"></div>\n\t</div>\n</div>\n";
+var editor$6 = "<div data-bge-dialog=\"2col\">\n\t<div data-bge-dialog-ui=\"sticky\">\n\t\t<div>\n\t\t\t<div data-bge-editor-ui=\"tabs\" data-bge-editor-ui-for=\"bgi-image__tabs-content\"></div>\n\n\t\t\t<div id=\"bgi-image__tabs-content\" role=\"tabpanel\" aria-label=\"画像\">\n\t\t\t\t<div data-bge-editor-ui=\"preview\"></div>\n\t\t\t\t<input type=\"hidden\" name=\"bge-path[]\" />\n\t\t\t\t<input type=\"hidden\" name=\"bge-alt[]\" />\n\t\t\t\t<input type=\"hidden\" name=\"bge-width[]\" />\n\t\t\t\t<input type=\"hidden\" name=\"bge-height[]\" />\n\t\t\t\t<input type=\"hidden\" name=\"bge-media[]\" />\n\n\t\t\t\t<input type=\"hidden\" name=\"bge-file-size\" />\n\t\t\t\t<div>\n\t\t\t\t\t<label>\n\t\t\t\t\t\t<span>メディアクエリー</span>\n\t\t\t\t\t\t<input type=\"text\" name=\"bge-media-input\" />\n\t\t\t\t\t</label>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div>\n\t\t\t<fieldset>\n\t\t\t\t<legend>画像のサイズ</legend>\n\t\t\t\t<div role=\"radiogroup\" aria-labelledby=\"bgi-image__radio-group1\">\n\t\t\t\t\t<div id=\"bgi-image__radio-group1\">基準</div>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-scale-type\" value=\"container\" /><span>基準</span></label>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-scale-type\" value=\"original\" checked />画像基準</label>\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<label for=\"bgi-image__range-number\">幅</label>\n\t\t\t\t\t\t<input type=\"number\" id=\"bgi-image__range-number\" name=\"bge-css-width-number\" min=\"1\" step=\"1\" value=\"100\" />\n\t\t\t\t\t\t<output name=\"bge-css-width-unit\">px</output>\n\t\t\t\t\t</span>\n\t\t\t\t\t<input aria-label=\"幅\" type=\"range\" name=\"bge-scale\" min=\"1\" max=\"100\" step=\"1\" value=\"100\" />\n\t\t\t\t</div>\n\t\t\t\t<div role=\"radiogroup\" aria-labelledby=\"bgi-image__radio-group2\">\n\t\t\t\t\t<div id=\"bgi-image__radio-group2\">縦横比</div>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-aspect-ratio\" value=\"unset\" checked />オリジナル</label>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-aspect-ratio\" value=\"1/1\" />1 : 1</label>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-aspect-ratio\" value=\"4/3\" />4 : 3</label>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-aspect-ratio\" value=\"16/9\" />16 : 9</label>\n\t\t\t\t</div>\n\t\t\t\t<input type=\"hidden\" name=\"bge-css-width\" />\n\t\t\t</fieldset>\n\t\t\t<label>\n\t\t\t\t<span>画像の代替テキスト(alt)</span>\n\t\t\t\t<input type=\"text\" name=\"bge-alt-editable\" />\n\t\t\t</label>\n\t\t\t<label>\n\t\t\t\t<span>キャプション</span>\n\t\t\t\t<input type=\"text\" name=\"bge-caption\" />\n\t\t\t</label>\n\t\t\t<fieldset>\n\t\t\t\t<legend>リンク</legend>\n\t\t\t\t<label><input type=\"checkbox\" name=\"bge-popup\" />ポップアップで画像を開く</label>\n\t\t\t\t<label>\n\t\t\t\t\t<span>リンク先URL</span>\n\t\t\t\t\t<input type=\"url\" name=\"bge-href\" />\n\t\t\t\t</label>\n\t\t\t\t<label><input type=\"checkbox\" name=\"bge-target-blank\" />別タブで開く</label>\n\t\t\t</fieldset>\n\t\t\t<label><input type=\"checkbox\" name=\"bge-lazy\" checked aria-describedby=\"bge-lazy-desc\" />遅延読み込み</label>\n\t\t\t<small id=\"bge-lazy-desc\">画像がブラウザの表示エリアに現れるまでファイルを読み込みません。</small>\n\t\t</div>\n\t</div>\n\t<div>\n\t\t<div data-bge-editor-ui=\"imageUploader\"></div>\n\t\t<div data-bge-editor-ui=\"imageList\"></div>\n\t</div>\n</div>\n";
 
 var style$6 = "[data-bgi='image'] {\n\tfigure {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tinline-size: var(--css-width, 100%);\n\t\tmax-inline-size: 100cqi;\n\t\tpadding: 0;\n\t\tmargin-block: 0;\n\t\tmargin-inline: auto;\n\n\t\t> :is(div, a, button) {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0;\n\t\t\tbackground: transparent;\n\t\t\tborder: none;\n\t\t}\n\t}\n\n\timg {\n\t\tdisplay: block;\n\t\tinline-size: var(--css-width, auto);\n\t\tmax-inline-size: 100%;\n\t\tblock-size: auto;\n\t\taspect-ratio: var(--aspect-ratio, unset);\n\t\tobject-fit: var(--object-fit, unset);\n\t}\n\n\tfigcaption {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tinline-size: 100%;\n\n\t\t&:empty {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n";
 
 var template$6 = "<div data-bge=\":style, :scale, :scale-type, :aspect-ratio\" data-bge-scale=\"100\" data-bge-scale-type=\"container\" data-bge-aspect-ratio=\"unset\" style=\"--css-width: 100cqi; --object-fit: cover; --aspect-ratio: unset\">\n\t<figure>\n\t\t<div data-bge=\":node, :href, :target, :command\">\n\t\t\t<picture data-bge-list>\n\t\t\t\t<img src=\"%sampleImagePath%\" alt=\"サンプル画像\" data-bge=\"path:src, :alt, :width, :height, :loading, :media\" width=\"400\" height=\"300\" loading=\"lazy\" />\n\t\t\t</picture>\n\t\t</div>\n\t\t<figcaption data-bge=\"caption\"></figcaption>\n\t</figure>\n</div>\n";
 
+function createWidthState() {
+  const MIN_NUMBER = 1;
+  let _widthState = {
+    absNumber: 100,
+    maxAbsNumber: 100,
+    relNumber: 1,
+    maxRelNumber: 1
+  };
+  let _unit = "px";
+  return {
+    setScaleType(type) {
+      _unit = type === "container" ? "cqi" : "px";
+    },
+    setNumber(number) {
+      switch (_unit) {
+        case "px": {
+          this.setAbsNumber(number);
+          return;
+        }
+        case "cqi": {
+          this.setScale(number);
+          return;
+        }
+      }
+    },
+    setAbsNumber(number) {
+      number = Math.max(MIN_NUMBER, number);
+      _widthState = updateRatio(_widthState, "absNumber", number);
+    },
+    setScale(scale) {
+      scale = Math.min(Math.max(MIN_NUMBER, scale), 100);
+      _widthState = updateRatio(_widthState, "relNumber", scale / 100);
+    },
+    setMaxNumber(number) {
+      number = Math.max(MIN_NUMBER, number);
+      _widthState = updateRatio(_widthState, "maxAbsNumber", number);
+    },
+    getCSSWidth() {
+      const num = this.getCSSWidthNumber();
+      return `${num}${_unit}`;
+    },
+    getCSSWidthNumber() {
+      return _unit === "px" ? this.getAbsNumber() : this.getScale();
+    },
+    getCSSWidthMaxNumber() {
+      return this.getScaleType() === "original" ? this.getMaxNumber() : 100;
+    },
+    getCSSWidthUnit() {
+      return _unit;
+    },
+    getScaleType() {
+      return _unit === "cqi" ? "container" : "original";
+    },
+    getAbsNumber() {
+      return Math.min(
+        Math.max(MIN_NUMBER, Math.round(_widthState.absNumber)),
+        _widthState.maxAbsNumber
+      );
+    },
+    getMaxNumber() {
+      return _widthState.maxAbsNumber;
+    },
+    getScale() {
+      return Math.round(_widthState.relNumber * 100);
+    },
+    debug() {
+      return {
+        ..._widthState,
+        unit: _unit
+      };
+    }
+  };
+}
+
 const ORIGIN = "__org";
 var image = createItem({
-  version: "4.0.0-alpha.29",
+  version: "4.0.0-alpha.30",
   name: "image",
   template: template$6,
   style: style$6,
@@ -287,8 +362,11 @@ var image = createItem({
         altEditable: data.alt?.[0] ?? ""
       };
     },
-    open(_, editor2) {
+    open(initData, editor2) {
       let currentIndex = 0;
+      const widthState = createWidthState();
+      widthState.setScaleType(initData.scaleType);
+      widthState.setScale(initData.scale);
       selectTab(currentIndex);
       function fileSelect() {
         const $path = editor2.get("$path");
@@ -324,6 +402,9 @@ var image = createItem({
         const $src = await loadImage(path);
         updateImage($src);
       }
+      editor2.engine.componentObserver.on("select-tab-in-item-editor", ({ index }) => {
+        selectTab(index);
+      });
       function updateImage($src) {
         if (!$src) {
           console.error("\u753B\u50CF\u306E\u8AAD\u307F\u8FBC\u307F\u306B\u5931\u6557\u3057\u307E\u3057\u305F");
@@ -341,29 +422,45 @@ var image = createItem({
         const media = [...editor2.get("$media")];
         media[currentIndex] = editor2.get("$mediaInput");
         editor2.update("$media", media);
+        widthState.setMaxNumber($src.width);
         updateCSSWidth();
       }
-      editor2.engine.componentObserver.on("select-tab-in-item-editor", ({ index }) => {
-        selectTab(index);
-      });
-      editor2.onChange("$scale", updateCSSWidth);
-      editor2.onChange("$scaleType", updateCSSWidth);
+      editor2.onChange(
+        "$cssWidthNumber",
+        (widthNumber) => {
+          widthState.setNumber(widthNumber);
+          updateCSSWidth();
+        },
+        false
+      );
+      editor2.onChange(
+        "$scaleType",
+        (scaleType) => {
+          widthState.setScaleType(scaleType);
+          updateCSSWidth();
+        },
+        false
+      );
+      editor2.onChange(
+        "$scale",
+        (scale) => {
+          widthState.setScale(scale);
+          updateCSSWidth();
+        },
+        false
+      );
       editor2.onChange("$mediaInput", (value) => {
         const media = [...editor2.get("$media")];
         media[currentIndex] = value;
         editor2.update("$media", media);
       });
       function updateCSSWidth() {
-        const scale = editor2.get("$scale");
-        const width = editor2.get("$width");
-        const scaleType = editor2.get("$scaleType");
-        editor2.update(
-          "$cssWidth",
-          scaleType === "container" ? `${scale}cqi` : (
-            // TODO: 複数画像の場合は、最初の画像の幅を使用するか、それともすべての画像の幅を使用するか検討
-            `${Math.round(width[0] * scale / 100)}px`
-          )
-        );
+        editor2.max("$cssWidthNumber", widthState.getCSSWidthMaxNumber());
+        editor2.update("$cssWidthUnit", widthState.getCSSWidthUnit());
+        editor2.update("$cssWidthNumber", widthState.getCSSWidthNumber());
+        editor2.update("$scaleType", widthState.getScaleType());
+        editor2.update("$scale", widthState.getScale());
+        editor2.update("$cssWidth", widthState.getCSSWidth());
       }
       editor2.onChange("$popup", (disable) => {
         editor2.disable("$href", disable);
@@ -433,7 +530,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({
-  version: "4.0.0-alpha.29",
+  version: "4.0.0-alpha.30",
   name: "import",
   template: template$5,
   style: style$5,
@@ -447,7 +544,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({
-  version: "4.0.0-alpha.29",
+  version: "4.0.0-alpha.30",
   name: "table",
   template: template$4,
   style: style$4,
@@ -475,7 +572,7 @@ var style$3 = "/* No Styling */\n";
 var template$3 = "<h2 data-bge=\"title-h2\">見出しを入力してください</h2>\n";
 
 var titleH2 = createItem({
-  version: "4.0.0-alpha.29",
+  version: "4.0.0-alpha.30",
   name: "title-h2",
   template: template$3,
   style: style$3,
@@ -489,7 +586,7 @@ var style$2 = "/* No Styling */\n";
 var template$2 = "<h3 data-bge=\"title-h3\">見出しを入力してください</h3>\n";
 
 var titleH3 = createItem({
-  version: "4.0.0-alpha.29",
+  version: "4.0.0-alpha.30",
   name: "title-h3",
   template: template$2,
   style: style$2,
@@ -503,7 +600,7 @@ var style$1 = "/* No Styling */\n";
 var template$1 = "<div data-bge=\"wysiwyg\"><p>本文を入力してください</p></div>\n";
 
 var wysiwyg = createItem({
-  version: "4.0.0-alpha.29",
+  version: "4.0.0-alpha.30",
   name: "wysiwyg",
   template: template$1,
   style: style$1,
@@ -518,7 +615,7 @@ var template = "<div data-id=\"3KtWfp0UopM\" data-title=\"YouTube動画\" data-w
 
 const FALLBACK_TITLE = "YouTube\u52D5\u753B";
 var youtube = createItem({
-  version: "4.0.0-alpha.29",
+  version: "4.0.0-alpha.30",
   name: "youtube",
   template,
   style,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@burger-editor/blocks",
-	"version": "4.0.0-alpha.30",
+	"version": "4.0.0-alpha.31",
 	"description": "BurgerEditor Blocks",
 	"author": "D-ZERO",
 	"license": "(MIT OR Apache-2.0)",
@@ -28,15 +28,16 @@
 		"dev": "rollup -c -w"
 	},
 	"dependencies": {
-		"@burger-editor/core": "4.0.0-alpha.30",
-		"@burger-editor/utils": "4.0.0-alpha.30"
+		"@burger-editor/core": "4.0.0-alpha.31",
+		"@burger-editor/utils": "4.0.0-alpha.31",
+		"@d-zero/shared": "0.16.0"
 	},
 	"devDependencies": {
-		"@burger-editor/custom-element": "4.0.0-alpha.30",
+		"@burger-editor/custom-element": "4.0.0-alpha.31",
 		"@types/google.maps": "3.58.1",
-		"rollup": "4.53.2",
+		"rollup": "4.53.3",
 		"rollup-plugin-esbuild": "6.2.1",
 		"rollup-plugin-string": "3.0.0"
 	},
-	"gitHead": "fe6cf132fc69f495630f3d28099474e4f4fa033e"
+	"gitHead": "eddeb2d87f068920d0e4bec26406afaa7ea86471"
 }