@firecms/editor 3.0.0-rc.1 → 3.0.0-rc.2

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.
package/dist/index.umd.js CHANGED
@@ -1,131 +1,102 @@
1
1
  (function(global, factory) {
2
- typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("@firecms/ui"), require("@tiptap/react"), require("@tiptap/extension-document"), require("tiptap-markdown"), require("@tiptap/extension-underline"), require("@tiptap/extension-heading"), require("@tiptap/extension-text-style"), require("@tiptap/extension-color"), require("@tiptap/extension-highlight"), require("@tiptap/extension-bold"), require("@tiptap/extension-italic"), require("@tiptap/extension-strike"), require("react-compiler-runtime"), require("@radix-ui/react-slot"), require("@tiptap/starter-kit"), require("@tiptap/extension-horizontal-rule"), require("@tiptap/extension-link"), require("@tiptap/extension-image"), require("@tiptap/extension-placeholder"), require("@tiptap/extension-task-item"), require("@tiptap/extension-task-list"), require("@tiptap/core"), require("@tiptap/pm/state"), require("@tiptap/pm/view"), require("@tiptap/extension-ordered-list"), require("@tiptap/extension-bullet-list"), require("@tiptap/extension-list-item"), require("@tiptap/extension-code-block"), require("@tiptap/extension-blockquote"), require("@tiptap/extension-code"), require("@tiptap/pm/model"), require("@tiptap/suggestion"), require("tippy.js")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "@firecms/ui", "@tiptap/react", "@tiptap/extension-document", "tiptap-markdown", "@tiptap/extension-underline", "@tiptap/extension-heading", "@tiptap/extension-text-style", "@tiptap/extension-color", "@tiptap/extension-highlight", "@tiptap/extension-bold", "@tiptap/extension-italic", "@tiptap/extension-strike", "react-compiler-runtime", "@radix-ui/react-slot", "@tiptap/starter-kit", "@tiptap/extension-horizontal-rule", "@tiptap/extension-link", "@tiptap/extension-image", "@tiptap/extension-placeholder", "@tiptap/extension-task-item", "@tiptap/extension-task-list", "@tiptap/core", "@tiptap/pm/state", "@tiptap/pm/view", "@tiptap/extension-ordered-list", "@tiptap/extension-bullet-list", "@tiptap/extension-list-item", "@tiptap/extension-code-block", "@tiptap/extension-blockquote", "@tiptap/extension-code", "@tiptap/pm/model", "@tiptap/suggestion", "tippy.js"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS Editor"] = {}, global.jsxRuntime, global.React, global.ui, global.react, global.Document, global.tiptapMarkdown, global.Underline, global.Heading, global.TextStyle, global.Color, global.Highlight, global.Bold, global.Italic, global.Strike, global.reactCompilerRuntime, global.reactSlot, global.StarterKit, global.HorizontalRule, global.TiptapLink, global.TiptapImage, global.Placeholder, global.extensionTaskItem, global.extensionTaskList, global.core, global.state, global.view, global.OrderedList, global.BulletList, global.ListItem, global.CodeBlock, global.Blockquote, global.Code, global.model, global.Suggestion, global.tippy));
3
- })(this, (function(exports2, jsxRuntime, React, ui, react, Document, tiptapMarkdown, Underline, Heading, TextStyle, Color, Highlight, Bold, Italic, Strike, reactCompilerRuntime, reactSlot, StarterKit, HorizontalRule, TiptapLink, TiptapImage, Placeholder, extensionTaskItem, extensionTaskList, core, state, view, OrderedList, BulletList, ListItem, CodeBlock, Blockquote, Code, model, Suggestion, tippy) {
2
+ typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("@firecms/ui"), require("@tiptap/react"), require("@tiptap/extension-document"), require("tiptap-markdown"), require("@tiptap/extension-underline"), require("@tiptap/extension-heading"), require("@tiptap/extension-text-style"), require("@tiptap/extension-color"), require("@tiptap/extension-highlight"), require("@tiptap/extension-bold"), require("@tiptap/extension-italic"), require("@tiptap/extension-strike"), require("react-compiler-runtime"), require("@tiptap/react/menus"), require("@tiptap/pm/state"), require("@radix-ui/react-slot"), require("@tiptap/starter-kit"), require("@tiptap/extension-horizontal-rule"), require("@tiptap/extension-link"), require("@tiptap/extension-image"), require("@tiptap/extension-placeholder"), require("@tiptap/extension-task-item"), require("@tiptap/extension-task-list"), require("@tiptap/core"), require("@tiptap/pm/view"), require("@tiptap/extension-ordered-list"), require("@tiptap/extension-bullet-list"), require("@tiptap/extension-list-item"), require("@tiptap/extension-code-block"), require("@tiptap/extension-blockquote"), require("@tiptap/extension-code"), require("@tiptap/pm/model"), require("@tiptap/suggestion"), require("@floating-ui/dom")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "@firecms/ui", "@tiptap/react", "@tiptap/extension-document", "tiptap-markdown", "@tiptap/extension-underline", "@tiptap/extension-heading", "@tiptap/extension-text-style", "@tiptap/extension-color", "@tiptap/extension-highlight", "@tiptap/extension-bold", "@tiptap/extension-italic", "@tiptap/extension-strike", "react-compiler-runtime", "@tiptap/react/menus", "@tiptap/pm/state", "@radix-ui/react-slot", "@tiptap/starter-kit", "@tiptap/extension-horizontal-rule", "@tiptap/extension-link", "@tiptap/extension-image", "@tiptap/extension-placeholder", "@tiptap/extension-task-item", "@tiptap/extension-task-list", "@tiptap/core", "@tiptap/pm/view", "@tiptap/extension-ordered-list", "@tiptap/extension-bullet-list", "@tiptap/extension-list-item", "@tiptap/extension-code-block", "@tiptap/extension-blockquote", "@tiptap/extension-code", "@tiptap/pm/model", "@tiptap/suggestion", "@floating-ui/dom"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS Editor"] = {}, global.jsxRuntime, global.React, global.ui, global.react, global.Document, global.tiptapMarkdown, global.Underline, global.Heading, global.extensionTextStyle, global.Color, global.Highlight, global.Bold, global.Italic, global.Strike, global.reactCompilerRuntime, global.menus, global.state, global.reactSlot, global.StarterKit, global.HorizontalRule, global.TiptapLink, global.TiptapImage, global.Placeholder, global.extensionTaskItem, global.extensionTaskList, global.core, global.view, global.OrderedList, global.BulletList, global.ListItem, global.CodeBlock, global.Blockquote, global.Code, global.model, global.Suggestion, global.dom));
3
+ })(this, (function(exports2, jsxRuntime, React, ui, react, Document, tiptapMarkdown, Underline, Heading, extensionTextStyle, Color, Highlight, Bold, Italic, Strike, reactCompilerRuntime, menus, state, reactSlot, StarterKit, HorizontalRule, TiptapLink, TiptapImage, Placeholder, extensionTaskItem, extensionTaskList, core, view, OrderedList, BulletList, ListItem, CodeBlock, Blockquote, Code, model, Suggestion, dom) {
4
4
  "use strict";
5
5
  const EditorBubble = React.forwardRef((t0, ref) => {
6
- const $ = reactCompilerRuntime.c(21);
6
+ const $ = reactCompilerRuntime.c(18);
7
7
  let children;
8
+ let options;
8
9
  let rest;
9
10
  let tippyOptions;
10
11
  if ($[0] !== t0) {
11
12
  ({
12
13
  children,
13
14
  tippyOptions,
15
+ options,
14
16
  ...rest
15
17
  } = t0);
16
18
  $[0] = t0;
17
19
  $[1] = children;
18
- $[2] = rest;
19
- $[3] = tippyOptions;
20
+ $[2] = options;
21
+ $[3] = rest;
22
+ $[4] = tippyOptions;
20
23
  } else {
21
24
  children = $[1];
22
- rest = $[2];
23
- tippyOptions = $[3];
25
+ options = $[2];
26
+ rest = $[3];
27
+ tippyOptions = $[4];
24
28
  }
25
29
  const {
26
30
  editor
27
31
  } = react.useCurrentEditor();
28
- const instanceRef = React.useRef(null);
32
+ tippyOptions?.placement;
29
33
  let t1;
30
- if ($[4] !== tippyOptions) {
31
- t1 = () => {
32
- if (!instanceRef.current || !tippyOptions?.placement) {
33
- return;
34
- }
35
- instanceRef.current.setProps({
36
- placement: tippyOptions.placement
37
- });
38
- instanceRef.current.popperInstance?.update();
39
- };
40
- $[4] = tippyOptions;
41
- $[5] = t1;
42
- } else {
43
- t1 = $[5];
44
- }
45
- const t2 = tippyOptions?.placement;
34
+ const shouldShow = _temp$1;
35
+ const t2 = tippyOptions?.placement ?? options?.placement;
46
36
  let t3;
47
- if ($[6] !== t2) {
48
- t3 = [t2];
37
+ if ($[5] !== options || $[6] !== t2) {
38
+ t3 = {
39
+ ...options,
40
+ placement: t2
41
+ };
42
+ $[5] = options;
49
43
  $[6] = t2;
50
44
  $[7] = t3;
51
45
  } else {
52
46
  t3 = $[7];
53
47
  }
54
- React.useEffect(t1, t3);
48
+ const mergedOptions = t3;
55
49
  let t4;
56
- const shouldShow = _temp$1;
57
- let t5;
58
- if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
59
- t5 = (val) => {
60
- instanceRef.current = val;
61
- };
62
- $[8] = t5;
63
- } else {
64
- t5 = $[8];
65
- }
66
- let t6;
67
- if ($[9] !== tippyOptions) {
68
- t6 = {
69
- onCreate: t5,
70
- moveTransition: "transform 0.15s ease-out",
71
- ...tippyOptions
72
- };
73
- $[9] = tippyOptions;
74
- $[10] = t6;
75
- } else {
76
- t6 = $[10];
77
- }
78
- let t7;
79
- if ($[11] !== rest || $[12] !== t6) {
80
- t7 = {
50
+ if ($[8] !== mergedOptions || $[9] !== rest) {
51
+ t4 = {
81
52
  shouldShow,
82
- tippyOptions: t6,
53
+ options: mergedOptions,
83
54
  ...rest
84
55
  };
85
- $[11] = rest;
86
- $[12] = t6;
87
- $[13] = t7;
56
+ $[8] = mergedOptions;
57
+ $[9] = rest;
58
+ $[10] = t4;
88
59
  } else {
89
- t7 = $[13];
60
+ t4 = $[10];
90
61
  }
91
- t4 = t7;
92
- const bubbleMenuProps = t4;
62
+ t1 = t4;
63
+ const bubbleMenuProps = t1;
93
64
  if (!editor) {
94
65
  return null;
95
66
  }
96
- let t8;
97
- if ($[14] !== bubbleMenuProps || $[15] !== children || $[16] !== editor) {
98
- t8 = /* @__PURE__ */ jsxRuntime.jsx(react.BubbleMenu, { editor, ...bubbleMenuProps, children });
99
- $[14] = bubbleMenuProps;
100
- $[15] = children;
101
- $[16] = editor;
102
- $[17] = t8;
67
+ let t5;
68
+ if ($[11] !== bubbleMenuProps || $[12] !== children || $[13] !== editor) {
69
+ t5 = /* @__PURE__ */ jsxRuntime.jsx(menus.BubbleMenu, { editor, ...bubbleMenuProps, children });
70
+ $[11] = bubbleMenuProps;
71
+ $[12] = children;
72
+ $[13] = editor;
73
+ $[14] = t5;
103
74
  } else {
104
- t8 = $[17];
75
+ t5 = $[14];
105
76
  }
106
- let t9;
107
- if ($[18] !== ref || $[19] !== t8) {
108
- t9 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref, children: t8 });
109
- $[18] = ref;
110
- $[19] = t8;
111
- $[20] = t9;
77
+ let t6;
78
+ if ($[15] !== ref || $[16] !== t5) {
79
+ t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref, children: t5 });
80
+ $[15] = ref;
81
+ $[16] = t5;
82
+ $[17] = t6;
112
83
  } else {
113
- t9 = $[20];
84
+ t6 = $[17];
114
85
  }
115
- return t9;
86
+ return t6;
116
87
  });
117
88
  function _temp$1(t0) {
118
89
  const {
119
90
  editor: editor_0,
120
- state: state2
91
+ state: state$1
121
92
  } = t0;
122
93
  const {
123
94
  selection
124
- } = state2;
95
+ } = state$1;
125
96
  const {
126
97
  empty
127
98
  } = selection;
128
- if (editor_0.isActive("image") || empty || react.isNodeSelection(selection)) {
99
+ if (editor_0.isActive("image") || empty || selection instanceof state.NodeSelection) {
129
100
  return false;
130
101
  }
131
102
  return true;
@@ -1027,11 +998,11 @@
1027
998
  view2.dispatch(view2.state.tr.setSelection(state.NodeSelection.create(view2.state.doc, nodePos)));
1028
999
  const slice = view2.state.selection.content();
1029
1000
  const {
1030
- dom,
1001
+ dom: dom2,
1031
1002
  text
1032
1003
  } = serializeForClipboard(view2, slice);
1033
1004
  event.dataTransfer.clearData();
1034
- event.dataTransfer.setData("text/html", dom.innerHTML);
1005
+ event.dataTransfer.setData("text/html", dom2.innerHTML);
1035
1006
  event.dataTransfer.setData("text/plain", text);
1036
1007
  event.dataTransfer.effectAllowed = "copyMove";
1037
1008
  event.dataTransfer.setDragImage(node, 0, 0);
@@ -1247,7 +1218,7 @@
1247
1218
  }
1248
1219
  });
1249
1220
  const CommandPluginKey = new state.PluginKey("slash-command");
1250
- const SlashCommand = react.Node.create({
1221
+ const SlashCommand = core.Node.create({
1251
1222
  name: "command",
1252
1223
  addOptions() {
1253
1224
  return {
@@ -1263,7 +1234,7 @@
1263
1234
  options,
1264
1235
  node
1265
1236
  }) {
1266
- return ["span", react.mergeAttributes(this.HTMLAttributes, options.HTMLAttributes), `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`];
1237
+ return ["span", core.mergeAttributes(this.HTMLAttributes, options.HTMLAttributes), `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`];
1267
1238
  },
1268
1239
  suggestion: {
1269
1240
  char: "/",
@@ -1293,8 +1264,7 @@
1293
1264
  }) => {
1294
1265
  const $from = state2.doc.resolve(range.from);
1295
1266
  const type = state2.schema.nodes[this.name];
1296
- const allow = !!$from.parent.type.contentMatch.matchType(type);
1297
- return allow;
1267
+ return !!$from.parent.type.contentMatch.matchType(type);
1298
1268
  }
1299
1269
  }
1300
1270
  };
@@ -1342,7 +1312,7 @@
1342
1312
  }) {
1343
1313
  if (this.options.renderLabel !== void 0) {
1344
1314
  console.warn("renderLabel is deprecated use renderText and renderHTML instead");
1345
- return ["span", react.mergeAttributes({
1315
+ return ["span", core.mergeAttributes({
1346
1316
  "data-type": this.name
1347
1317
  }, this.options.HTMLAttributes, HTMLAttributes), this.options.renderLabel({
1348
1318
  options: this.options,
@@ -1352,7 +1322,7 @@
1352
1322
  const mergedOptions = {
1353
1323
  ...this.options
1354
1324
  };
1355
- mergedOptions.HTMLAttributes = react.mergeAttributes({
1325
+ mergedOptions.HTMLAttributes = core.mergeAttributes({
1356
1326
  "data-type": this.name
1357
1327
  }, this.options.HTMLAttributes, HTMLAttributes);
1358
1328
  const html = this.options.renderHTML({
@@ -1360,7 +1330,7 @@
1360
1330
  node
1361
1331
  });
1362
1332
  if (typeof html === "string") {
1363
- return ["span", react.mergeAttributes({
1333
+ return ["span", core.mergeAttributes({
1364
1334
  "data-type": this.name
1365
1335
  }, this.options.HTMLAttributes, HTMLAttributes), html];
1366
1336
  }
@@ -1424,13 +1394,14 @@
1424
1394
  return availableSuggestionItems.filter((item) => {
1425
1395
  const inTitle = item.title.toLowerCase().startsWith(query.toLowerCase());
1426
1396
  if (inTitle) return inTitle;
1427
- const inSearchTerms = item.searchTerms?.some((term) => term.toLowerCase().startsWith(query.toLowerCase()));
1428
- return inSearchTerms;
1397
+ return item.searchTerms?.some((term) => term.toLowerCase().startsWith(query.toLowerCase()));
1429
1398
  });
1430
1399
  },
1431
1400
  render: () => {
1432
1401
  let component;
1433
- let popup;
1402
+ let containerEl = null;
1403
+ let cleanupAutoUpdate = null;
1404
+ let reference = null;
1434
1405
  return {
1435
1406
  onStart: (props) => {
1436
1407
  component = new react.ReactRenderer(CommandList, {
@@ -1444,35 +1415,69 @@
1444
1415
  if (!props.clientRect) {
1445
1416
  return;
1446
1417
  }
1447
- popup = tippy("body", {
1448
- getReferenceClientRect: props.clientRect,
1449
- appendTo: ref?.current,
1450
- content: component.element,
1451
- showOnCreate: true,
1452
- interactive: true,
1453
- trigger: "manual",
1454
- placement: "bottom-start"
1418
+ containerEl = document.createElement("div");
1419
+ containerEl.style.position = "fixed";
1420
+ containerEl.style.left = "0px";
1421
+ containerEl.style.top = "0px";
1422
+ containerEl.style.zIndex = "9999";
1423
+ (ref?.current || document.body).appendChild(containerEl);
1424
+ containerEl.appendChild(component.element);
1425
+ reference = {
1426
+ getBoundingClientRect: props.clientRect
1427
+ };
1428
+ cleanupAutoUpdate = dom.autoUpdate(reference, containerEl, () => {
1429
+ if (!reference) return;
1430
+ dom.computePosition(reference, containerEl, {
1431
+ placement: "bottom-start",
1432
+ middleware: [dom.offset(4), dom.flip(), dom.shift()],
1433
+ strategy: "fixed"
1434
+ }).then(({
1435
+ x,
1436
+ y
1437
+ }) => {
1438
+ Object.assign(containerEl.style, {
1439
+ left: `${x}px`,
1440
+ top: `${y}px`,
1441
+ visibility: "visible"
1442
+ });
1443
+ });
1455
1444
  });
1456
1445
  },
1457
1446
  onUpdate(props) {
1458
1447
  component.updateProps(props);
1459
- if (!props.clientRect) {
1448
+ if (!props.clientRect || !containerEl || !reference) {
1460
1449
  return;
1461
1450
  }
1462
- popup[0].setProps({
1463
- getReferenceClientRect: props.clientRect
1451
+ reference.getBoundingClientRect = props.clientRect;
1452
+ dom.computePosition(reference, containerEl, {
1453
+ placement: "bottom-start",
1454
+ middleware: [dom.offset(4), dom.flip(), dom.shift()],
1455
+ strategy: "fixed"
1456
+ }).then(({
1457
+ x,
1458
+ y
1459
+ }) => {
1460
+ Object.assign(containerEl.style, {
1461
+ left: `${x}px`,
1462
+ top: `${y}px`,
1463
+ visibility: "visible"
1464
+ });
1464
1465
  });
1465
1466
  },
1466
1467
  onKeyDown(props) {
1467
1468
  if (props.event.key === "Escape") {
1468
- popup[0].hide();
1469
1469
  props.event.preventDefault();
1470
1470
  return true;
1471
1471
  }
1472
1472
  return component.ref?.onKeyDown(props);
1473
1473
  },
1474
1474
  onExit() {
1475
- if (popup && popup[0]) popup[0].destroy();
1475
+ if (cleanupAutoUpdate) cleanupAutoUpdate();
1476
+ if (containerEl && containerEl.parentNode) {
1477
+ containerEl.parentNode.removeChild(containerEl);
1478
+ }
1479
+ containerEl = null;
1480
+ reference = null;
1476
1481
  component?.destroy();
1477
1482
  }
1478
1483
  };
@@ -1834,14 +1839,12 @@
1834
1839
  input.click();
1835
1840
  }
1836
1841
  }];
1837
- const CustomDocument = Document.extend({
1838
- // content: 'heading block*',
1839
- });
1840
1842
  const proseClasses = {
1841
1843
  "sm": "prose-sm",
1842
1844
  "base": "prose-base",
1843
1845
  "lg": "prose-lg"
1844
1846
  };
1847
+ const canUseDOM = Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
1845
1848
  const FireCMSEditor = ({
1846
1849
  content,
1847
1850
  onJsonContentChange,
@@ -1902,7 +1905,7 @@
1902
1905
  }
1903
1906
  };
1904
1907
  const proseClass = proseClasses[textSize];
1905
- const extensions = React.useMemo(() => [starterKit, CustomDocument, HighlightDecorationExtension(highlight), TextLoadingDecorationExtension, Underline, Bold, TextStyle, Italic, Strike, Color, Highlight.configure({
1908
+ const extensions = React.useMemo(() => [starterKit, Document.extend({}), HighlightDecorationExtension(highlight), TextLoadingDecorationExtension, Underline, Bold, extensionTextStyle.TextStyleKit, Italic, Strike, Color, Highlight.configure({
1906
1909
  multicolor: true
1907
1910
  }), Heading, CustomKeymap, DragAndDrop, placeholder, tiptapLink, imageExtension, taskList, taskItem, tiptapMarkdown.Markdown.configure({
1908
1911
  html: true
@@ -1915,7 +1918,7 @@
1915
1918
  aiController
1916
1919
  })
1917
1920
  })], []);
1918
- return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: "relative min-h-[300px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(react.EditorProvider, { content: content ?? "", extensions, editorProps: {
1921
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: "relative min-h-[300px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(react.EditorProvider, { content: content ?? "", extensions, immediatelyRender: canUseDOM, editorProps: {
1919
1922
  editable: () => !disabled,
1920
1923
  attributes: {
1921
1924
  class: ui.cls(proseClass, "prose-headings:font-title font-default focus:outline-none max-w-full p-12")
@@ -1929,8 +1932,9 @@
1929
1932
  editor: editor_1
1930
1933
  }) => {
1931
1934
  onEditorUpdate(editor_1);
1932
- }, children: /* @__PURE__ */ jsxRuntime.jsxs(EditorBubble, { tippyOptions: {
1933
- placement: "top"
1935
+ }, children: /* @__PURE__ */ jsxRuntime.jsxs(EditorBubble, { options: {
1936
+ placement: "top",
1937
+ offset: 6
1934
1938
  }, className: ui.cls("flex w-fit max-w-[90vw] h-10 overflow-hidden rounded border bg-white dark:bg-surface-900 shadow", ui.defaultBorderMixin), children: [
1935
1939
  /* @__PURE__ */ jsxRuntime.jsx(NodeSelector, { portalContainer: ref.current, open: openNode, onOpenChange: setOpenNode }),
1936
1940
  /* @__PURE__ */ jsxRuntime.jsx(ui.Separator, { orientation: "vertical" }),
@@ -2103,7 +2107,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
2103
2107
  transition: opacity ease-in 0.2s;
2104
2108
  border-radius: 0.25rem;
2105
2109
 
2106
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(128, 128, 128, 0.9)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
2110
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(128, 128, 128, 0.9)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7,8.44771525 7,9 7,9 C7,9.55228475 7,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
2107
2111
  background-size: calc(0.5em + 0.375rem) calc(0.5em + 0.375rem);
2108
2112
  background-repeat: no-repeat;
2109
2113
  background-position: center;