@burger-editor/blocks 4.0.0-alpha.26 → 4.0.0-alpha.28

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.
Files changed (2) hide show
  1. package/dist/index.js +63 -51
  2. package/package.json +6 -6
package/dist/index.js CHANGED
@@ -1,21 +1,18 @@
1
+ import { createItem } from '@burger-editor/core';
1
2
  import { mergeItems, formatByteSize, markdownToHtml, htmlToMarkdown, parseYTId } from '@burger-editor/utils';
2
3
 
3
- function createItem(item) {
4
- return item;
5
- }
6
-
7
- var editor$a = "<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";
4
+ 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
5
 
9
- var style$a = "/* No Styling */\n";
6
+ var style$b = "/* No Styling */\n";
10
7
 
11
- var template$a = "<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";
8
+ 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";
12
9
 
13
10
  var button = createItem({
14
- version: "4.0.0-alpha.25",
11
+ version: "4.0.0-alpha.27",
15
12
  name: "button",
16
- template: template$a,
17
- style: style$a,
18
- editor: editor$a,
13
+ template: template$b,
14
+ style: style$b,
15
+ editor: editor$b,
19
16
  editorOptions: {
20
17
  beforeOpen(data, editor2) {
21
18
  const kindOptions = mergeOptions(
@@ -60,32 +57,32 @@ function mergeOptions(defaultOptions, configOptions = []) {
60
57
  );
61
58
  }
62
59
 
63
- var editor$9 = "<label>\n\t<input type=\"checkbox\" name=\"bge-open\" />\n\t<span>開いた状態で公開する</span>\n</label>\n<label>\n\t<span>概要</span>\n\t<input type=\"text\" name=\"bge-summary\" />\n</label>\n<bge-wysiwyg-editor name=\"bge-content\" item-name=\"details\" commands=\"bold,italic,underline,strikethrough,link,blockquote,bullet-list,ordered-list\"></bge-wysiwyg-editor>\n";
60
+ var editor$a = "<label>\n\t<input type=\"checkbox\" name=\"bge-open\" />\n\t<span>開いた状態で公開する</span>\n</label>\n<label>\n\t<span>概要</span>\n\t<input type=\"text\" name=\"bge-summary\" />\n</label>\n<bge-wysiwyg-editor name=\"bge-content\" item-name=\"details\" commands=\"bold,italic,underline,strikethrough,link,blockquote,bullet-list,ordered-list\"></bge-wysiwyg-editor>\n";
64
61
 
65
- var style$9 = "/* No Styling */\n";
62
+ var style$a = "/* No Styling */\n";
66
63
 
67
- var template$9 = "<details data-bge=\"open:open\">\n\t<summary data-bge=\"summary\">折りたたみコンテンツ</summary>\n\t<div data-bge=\"content\"><p>内容を入力してください</p></div>\n</details>\n";
64
+ 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";
68
65
 
69
66
  var details = createItem({
70
- version: "4.0.0-alpha.25",
67
+ version: "4.0.0-alpha.27",
71
68
  name: "details",
72
- template: template$9,
73
- style: style$9,
74
- editor: editor$9
69
+ template: template$a,
70
+ style: style$a,
71
+ editor: editor$a
75
72
  });
76
73
 
77
- var editor$8 = "<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=\"preview\"></div>\n\t\t\t<input type=\"hidden\" name=\"bge-path\" />\n\t\t\t<input type=\"hidden\" name=\"bge-formated-size\" value=\"0kB\" />\n\t\t\t<input type=\"hidden\" name=\"bge-size\" value=\"0\" />\n\t\t</div>\n\n\t\t<div>\n\t\t\t<label>\n\t\t\t\t<span>表示ファイル名</span>\n\t\t\t\t<input type=\"text\" name=\"bge-name\" />\n\t\t\t</label>\n\t\t\t<label><input type=\"checkbox\" name=\"bge-download-check\" />ブラウザで開かずに直接ダウンロードさせる</label>\n\t\t</div>\n\t</div>\n\t<div>\n\t\t<div data-bge-editor-ui=\"fileUploader\"></div>\n\t\t<div data-bge-editor-ui=\"fileList\"></div>\n\t</div>\n</div>\n";
74
+ var editor$9 = "<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=\"preview\"></div>\n\t\t\t<input type=\"hidden\" name=\"bge-path\" />\n\t\t\t<input type=\"hidden\" name=\"bge-formated-size\" value=\"0kB\" />\n\t\t\t<input type=\"hidden\" name=\"bge-size\" value=\"0\" />\n\t\t</div>\n\n\t\t<div>\n\t\t\t<label>\n\t\t\t\t<span>表示ファイル名</span>\n\t\t\t\t<input type=\"text\" name=\"bge-name\" />\n\t\t\t</label>\n\t\t\t<label><input type=\"checkbox\" name=\"bge-download-check\" />ブラウザで開かずに直接ダウンロードさせる</label>\n\t\t</div>\n\t</div>\n\t<div>\n\t\t<div data-bge-editor-ui=\"fileUploader\"></div>\n\t\t<div data-bge-editor-ui=\"fileList\"></div>\n\t</div>\n</div>\n";
78
75
 
79
- var style$8 = "[data-bgi='download-file'] {\n\t[data-bge*='size'] {\n\t\t&::before {\n\t\t\tcontent: '(';\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: ')';\n\t\t}\n\t}\n}\n";
76
+ var style$9 = "[data-bgi='download-file'] {\n\t[data-bge*='size'] {\n\t\t&::before {\n\t\t\tcontent: '(';\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: ')';\n\t\t}\n\t}\n}\n";
80
77
 
81
- var template$8 = "<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";
78
+ 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";
82
79
 
83
80
  var downloadFile = createItem({
84
- version: "4.0.0-alpha.25",
81
+ version: "4.0.0-alpha.27",
85
82
  name: "download-file",
86
- template: template$8,
87
- style: style$8,
88
- editor: editor$8,
83
+ template: template$9,
84
+ style: style$9,
85
+ editor: editor$9,
89
86
  editorOptions: {
90
87
  open(data, editor2) {
91
88
  editor2.engine.componentObserver.notify("file-select", {
@@ -113,18 +110,18 @@ var downloadFile = createItem({
113
110
  }
114
111
  });
115
112
 
116
- var editor$7 = "<div id=\"bge-google-maps\" style=\"inline-size: 100%; aspect-ratio: 8 / 5\">map</div>\n<input type=\"hidden\" name=\"bge-zoom\" />\n<input type=\"hidden\" name=\"bge-url\" />\n<div>\n\t<label>\n\t\t<span>住所から検索</span>\n\t\t<input type=\"search\" name=\"bge-search\" class=\"bge-search\" />\n\t</label>\n\t<button type=\"button\" name=\"bge-search-button\">検索</button>\n</div>\n<div>\n\t<label>\n\t\t<span>緯度</span>\n\t\t<output name=\"bge-lat\"></output>\n\t</label>\n\t<label>\n\t\t<span>経度</span>\n\t\t<output name=\"bge-lng\"></output>\n\t</label>\n</div>\n";
113
+ var editor$8 = "<div id=\"bge-google-maps\" style=\"inline-size: 100%; aspect-ratio: 8 / 5\">map</div>\n<input type=\"hidden\" name=\"bge-zoom\" />\n<input type=\"hidden\" name=\"bge-url\" />\n<div>\n\t<label>\n\t\t<span>住所から検索</span>\n\t\t<input type=\"search\" name=\"bge-search\" class=\"bge-search\" />\n\t</label>\n\t<button type=\"button\" name=\"bge-search-button\">検索</button>\n</div>\n<div>\n\t<label>\n\t\t<span>緯度</span>\n\t\t<output name=\"bge-lat\"></output>\n\t</label>\n\t<label>\n\t\t<span>経度</span>\n\t\t<output name=\"bge-lng\"></output>\n\t</label>\n</div>\n";
117
114
 
118
- var style$7 = "[data-bgi='google-maps'] {\n\tdiv {\n\t\tinline-size: 100%;\n\t\taspect-ratio: 8 / 5;\n\t}\n\n\timg {\n\t\tdisplay: block;\n\t\tinline-size: 100%;\n\t\tblock-size: 100%;\n\t\tmargin-block: 0;\n\t\tmargin-inline: auto;\n\t\tobject-fit: contain;\n\t}\n\n\ta {\n\t\tdisplay: none;\n\t}\n}\n";
115
+ var style$8 = "[data-bgi='google-maps'] {\n\tdiv {\n\t\tinline-size: 100%;\n\t\taspect-ratio: 8 / 5;\n\t}\n\n\timg {\n\t\tdisplay: block;\n\t\tinline-size: 100%;\n\t\tblock-size: 100%;\n\t\tmargin-block: 0;\n\t\tmargin-inline: auto;\n\t\tobject-fit: contain;\n\t}\n\n\ta {\n\t\tdisplay: none;\n\t}\n}\n";
119
116
 
120
- var template$7 = "<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";
117
+ 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";
121
118
 
122
119
  var googleMaps = createItem({
123
- version: "4.0.0-alpha.25",
120
+ version: "4.0.0-alpha.27",
124
121
  name: "google-maps",
125
- template: template$7,
126
- style: style$7,
127
- editor: editor$7,
122
+ template: template$8,
123
+ style: style$8,
124
+ editor: editor$8,
128
125
  editorOptions: {
129
126
  customData: {
130
127
  search: null
@@ -248,33 +245,33 @@ var googleMaps = createItem({
248
245
  }
249
246
  });
250
247
 
251
- var editor$6 = "<div>\n\t<label>\n\t\t<span>区切り線の種類</span>\n\t\t<select name=\"bge-kind\">\n\t\t\t<option value=\"primary\">標準</option>\n\t\t\t<option value=\"dashed\">破線</option>\n\t\t\t<option value=\"bold\">太い区切り線</option>\n\t\t\t<option value=\"narrow\">細い区切り線</option>\n\t\t</select>\n\t</label>\n</div>\n";
248
+ var editor$7 = "<div>\n\t<label>\n\t\t<span>区切り線の種類</span>\n\t\t<select name=\"bge-kind\">\n\t\t\t<option value=\"primary\">標準</option>\n\t\t\t<option value=\"dashed\">破線</option>\n\t\t\t<option value=\"bold\">太い区切り線</option>\n\t\t\t<option value=\"narrow\">細い区切り線</option>\n\t\t</select>\n\t</label>\n</div>\n";
252
249
 
253
- var style$6 = "[data-bgi='hr'] {\n\t--inline-size: 100%;\n\t--border-color: #000;\n\t--border-width: 1px;\n\t--border-kind: solid;\n\n\t> div {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t}\n\n\thr {\n\t\tinline-size: var(--inline-size);\n\t\tborder: var(--border-color) var(--border-kind) var(--border-width);\n\t}\n}\n";
250
+ var style$7 = "[data-bgi='hr'] {\n\t--inline-size: 100%;\n\t--border-color: #000;\n\t--border-width: 1px;\n\t--border-kind: solid;\n\n\t> div {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t}\n\n\thr {\n\t\tinline-size: var(--inline-size);\n\t\tborder: var(--border-color) var(--border-kind) var(--border-width);\n\t}\n}\n";
254
251
 
255
- var template$6 = "<div data-bgi-hr-kind=\"primary\" data-bge=\"kind:data-bgi-hr-kind\">\n\t<hr />\n</div>\n";
252
+ var template$7 = "<div data-bgi-hr-kind=\"primary\" data-bge=\"kind:data-bgi-hr-kind\">\n\t<hr />\n</div>\n";
256
253
 
257
254
  var hr = createItem({
258
- version: "4.0.0-alpha.25",
255
+ version: "4.0.0-alpha.27",
259
256
  name: "hr",
260
- template: template$6,
261
- style: style$6,
262
- editor: editor$6
257
+ template: template$7,
258
+ style: style$7,
259
+ editor: editor$7
263
260
  });
264
261
 
265
- var editor$5 = "<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";
262
+ 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";
266
263
 
267
- var style$5 = "[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: 0;\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";
264
+ 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: 0;\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";
268
265
 
269
- var template$5 = "<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";
266
+ 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";
270
267
 
271
268
  const ORIGIN = "__org";
272
269
  var image = createItem({
273
- version: "4.0.0-alpha.25",
270
+ version: "4.0.0-alpha.27",
274
271
  name: "image",
275
- template: template$5,
276
- style: style$5,
277
- editor: editor$5,
272
+ template: template$6,
273
+ style: style$6,
274
+ editor: editor$6,
278
275
  editorOptions: {
279
276
  beforeOpen(data) {
280
277
  const path = data.path.map((p) => p.replace(ORIGIN, ""));
@@ -429,6 +426,20 @@ async function loadImage(src) {
429
426
  });
430
427
  }
431
428
 
429
+ var editor$5 = "<label>\n\t<span>読み込むHTMLファイルのパス</span>\n\t<input type=\"text\" name=\"bge-src\" />\n</label>\n";
430
+
431
+ var style$5 = "[data-bgi='import'] {\n\tbge-import {\n\t\t&::before {\n\t\t\tfont-weight: bold;\n\t\t\tcontent: 'Import: ';\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: attr(src);\n\t\t}\n\t}\n}\n";
432
+
433
+ var template$5 = "<bge-import data-bge=\":src\" src=\"\"></bge-import>\n";
434
+
435
+ var importItem = createItem({
436
+ version: "4.0.0-alpha.27",
437
+ name: "import",
438
+ template: template$5,
439
+ style: style$5,
440
+ editor: editor$5
441
+ });
442
+
432
443
  var editor$4 = "<div data-bge-dialog=\"wide\">\n\t<div>\n\t\t<label>\n\t\t\t<input type=\"checkbox\" name=\"bge-scrollable\" />\n\t\t\t<span>横スクロール可能</span>\n\t\t</label>\n\t</div>\n\n\t<div>\n\t\t<label>\n\t\t\t<span>表見出し</span>\n\t\t\t<input type=\"text\" name=\"bge-caption\" />\n\t\t</label>\n\t</div>\n\n\t<div data-bge-editor-ui=\"tableEditor\"></div>\n\t<input type=\"hidden\" name=\"bge\" />\n</div>\n";
433
444
 
434
445
  var style$4 = "/* No Styling */\n";
@@ -436,7 +447,7 @@ var style$4 = "/* No Styling */\n";
436
447
  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";
437
448
 
438
449
  var table = createItem({
439
- version: "4.0.0-alpha.25",
450
+ version: "4.0.0-alpha.27",
440
451
  name: "table",
441
452
  template: template$4,
442
453
  style: style$4,
@@ -464,7 +475,7 @@ var style$3 = "/* No Styling */\n";
464
475
  var template$3 = "<h2 data-bge=\"title-h2\">見出しを入力してください</h2>\n";
465
476
 
466
477
  var titleH2 = createItem({
467
- version: "4.0.0-alpha.25",
478
+ version: "4.0.0-alpha.27",
468
479
  name: "title-h2",
469
480
  template: template$3,
470
481
  style: style$3,
@@ -478,7 +489,7 @@ var style$2 = "/* No Styling */\n";
478
489
  var template$2 = "<h3 data-bge=\"title-h3\">見出しを入力してください</h3>\n";
479
490
 
480
491
  var titleH3 = createItem({
481
- version: "4.0.0-alpha.25",
492
+ version: "4.0.0-alpha.27",
482
493
  name: "title-h3",
483
494
  template: template$2,
484
495
  style: style$2,
@@ -492,7 +503,7 @@ var style$1 = "/* No Styling */\n";
492
503
  var template$1 = "<div data-bge=\"wysiwyg\"><p>本文を入力してください</p></div>\n";
493
504
 
494
505
  var wysiwyg = createItem({
495
- version: "4.0.0-alpha.25",
506
+ version: "4.0.0-alpha.27",
496
507
  name: "wysiwyg",
497
508
  template: template$1,
498
509
  style: style$1,
@@ -507,7 +518,7 @@ var template = "<div data-id=\"3KtWfp0UopM\" data-title=\"YouTube動画\" data-w
507
518
 
508
519
  const FALLBACK_TITLE = "YouTube\u52D5\u753B";
509
520
  var youtube = createItem({
510
- version: "4.0.0-alpha.25",
521
+ version: "4.0.0-alpha.27",
511
522
  name: "youtube",
512
523
  template,
513
524
  style,
@@ -554,6 +565,7 @@ const items = {
554
565
  "google-maps": googleMaps,
555
566
  hr,
556
567
  image,
568
+ import: importItem,
557
569
  table,
558
570
  "title-h2": titleH2,
559
571
  "title-h3": titleH3,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@burger-editor/blocks",
3
- "version": "4.0.0-alpha.26",
3
+ "version": "4.0.0-alpha.28",
4
4
  "description": "BurgerEditor Blocks",
5
5
  "author": "D-ZERO",
6
6
  "license": "(MIT OR Apache-2.0)",
@@ -28,15 +28,15 @@
28
28
  "dev": "rollup -c -w"
29
29
  },
30
30
  "dependencies": {
31
- "@burger-editor/core": "4.0.0-alpha.26",
32
- "@burger-editor/utils": "4.0.0-alpha.26"
31
+ "@burger-editor/core": "4.0.0-alpha.28",
32
+ "@burger-editor/utils": "4.0.0-alpha.28"
33
33
  },
34
34
  "devDependencies": {
35
- "@burger-editor/custom-element": "4.0.0-alpha.26",
35
+ "@burger-editor/custom-element": "4.0.0-alpha.28",
36
36
  "@types/google.maps": "3.58.1",
37
- "rollup": "4.52.4",
37
+ "rollup": "4.52.5",
38
38
  "rollup-plugin-esbuild": "6.2.1",
39
39
  "rollup-plugin-string": "3.0.0"
40
40
  },
41
- "gitHead": "321557f030a4ba164a619dfe02dd31ba6133735d"
41
+ "gitHead": "10ee4534c5965d4a8d61309a57915dd883a5ffd0"
42
42
  }