import { i as isArray, m as map, T as Text$1, N as Node$1, c as concat, f as from, j as jsx, a as forEach, _ as _defineProperty, g as getOwnPropertyDescriptors, d as defineProperties, b as defineProperty, e as getOwnPropertyDescriptor, k as keys, h as getOwnPropertySymbols, l as filter, o, n as indexOf, p as _objectWithoutProperties, q as o$1, r as a, y, E as Editor$1, s as includes, t as Transforms, u as Element$1, v as _slicedToArray, w as useSlate, x as s, z as s$1, A as l, B as y$1, C as i, D as g, F as l$1, G as m, H as m$1, I as _parseInt, J as A, K as d, L as withHistory, M as withReact, O as p, P as Editable$1, S as Slate, Q as createEditor, R as t, U as entries, V as _default, W as oa, X as ea, Y as r, Z as o$2, $ as _asyncToGenerator, a0 as regenerator } from './vendor.js';
import { Text as Text$2, useOptions, useElement } from '@poool/oak';

function ownKeys$9(object, enumerableOnly) { var keys$1 = keys(object); if (getOwnPropertySymbols) { var symbols = getOwnPropertySymbols(object); if (enumerableOnly) { symbols = filter(symbols).call(symbols, function (sym) { return getOwnPropertyDescriptor(object, sym).enumerable; }); } keys$1.push.apply(keys$1, symbols); } return keys$1; }

function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context4; forEach(_context4 = ownKeys$9(Object(source), true)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }); } else if (getOwnPropertyDescriptors) { defineProperties(target, getOwnPropertyDescriptors(source)); } else { var _context5; forEach(_context5 = ownKeys$9(Object(source))).call(_context5, function (key) { defineProperty(target, key, getOwnPropertyDescriptor(source, key)); }); } } return target; }
var ELEMENT_TAGS = {
  A: function A(el) {
    return {
      type: 'link',
      url: el.getAttribute('href')
    };
  },
  BLOCKQUOTE: function BLOCKQUOTE() {
    return {
      type: 'quote'
    };
  },
  LI: function LI() {
    return {
      type: 'list-item'
    };
  },
  OL: function OL() {
    return {
      type: 'numbered-list'
    };
  },
  P: function P() {
    return {
      type: 'paragraph'
    };
  },
  UL: function UL() {
    return {
      type: 'bulleted-list'
    };
  },
  DIV: function DIV(el) {
    return el.style.textAlign ? {
      type: "text-".concat(el.style.textAlign)
    } : null;
  }
};
var TEXT_TAGS = {
  CODE: function CODE() {
    return {
      code: true
    };
  },
  EM: function EM() {
    return {
      italic: true
    };
  },
  I: function I() {
    return {
      italic: true
    };
  },
  STRONG: function STRONG() {
    return {
      bold: true
    };
  },
  B: function B() {
    return {
      bold: true
    };
  },
  U: function U() {
    return {
      underline: true
    };
  },
  SPAN: function SPAN(_ref) {
    var _ref$style = _ref.style,
        style = _ref$style === void 0 ? {} : _ref$style;
    return _objectSpread$9(_objectSpread$9(_objectSpread$9(_objectSpread$9(_objectSpread$9({}, style.color ? {
      color: style.color
    } : {}), style.fontSize ? {
      size: style.fontSize
    } : {}), style.fontWeight ? {
      bold: style.fontWeight === 'bold'
    } : {}), style.fontStyle ? {
      italic: style.fontStyle === 'italic'
    } : {}), style.textDecoration ? {
      underline: (style === null || style === void 0 ? void 0 : style.textDecoration) === 'underline'
    } : {});
  }
};
var ALIGNMENTS = {
  'text-center': 'center',
  'text-right': 'right',
  'text-justify': 'justify'
};
var serialize = function serialize() {
  var _node$children, _context2;

  var node = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

  if (isArray(node)) {
    return map(node).call(node, function (n, i) {
      return serialize(n) + (n.children && i !== node.length - 1 ? '<br />' : '');
    }).join('');
  }

  if (Text$1.isText(node)) {
    var string = Node$1.string(node).replace('\n', '<br />');
    var styles = '';
    if (node.bold) styles += 'font-weight:bold;';
    if (node.underline) styles += 'text-decoration:underline;';
    if (node.italic) styles += 'font-style:italic;';
    if (node.size) styles += "font-size:".concat(node.size, ";");
    if (node.color) styles += "color:".concat(node.color, ";");

    if (styles.length > 0) {
      var _context;

      styles = " style=\"".concat(styles, "\"");
      return concat(_context = "<span".concat(styles, ">")).call(_context, string, "</span>");
    } else {
      return string;
    }
  }

  var children = (_node$children = node.children) === null || _node$children === void 0 ? void 0 : map(_node$children).call(_node$children, function (n) {
    return serialize(n);
  }).join('');

  switch (node.type) {
    case 'text-center':
    case 'text-right':
    case 'text-justify':
      return "<div style=\"text-align:".concat(ALIGNMENTS[node.type], ";\">") + "".concat(children, "</div>");

    case 'quote':
      return "<blockquote><p>".concat(children, "</p></blockquote>");

    case 'paragraph':
      return "<div>".concat(children, "</div>");

    case 'link':
      return concat(_context2 = "<a href=\"".concat(node.url, "\">")).call(_context2, children, "</a>");

    default:
      return children;
  }
};
var deserializeNode = function deserializeNode(el) {
  var _context3;

  if (el.nodeType === 3) {
    return el.textContent;
  } else if (el.nodeType !== 1) {
    return null;
  } else if (el.nodeName === 'BR') {
    return '\n';
  }

  var children = map(_context3 = from(el.childNodes)).call(_context3, deserializeNode);

  if (el.nodeName === 'BODY') {
    return jsx('fragment', {}, children);
  }

  if (ELEMENT_TAGS[el.nodeName]) {
    var attrs = ELEMENT_TAGS[el.nodeName](el);
    return jsx('element', attrs, children);
  }

  if (TEXT_TAGS[el.nodeName]) {
    var _attrs = TEXT_TAGS[el.nodeName](el);

    return map(children).call(children, function (child) {
      return jsx('text', _attrs, child);
    });
  }

  return children;
};
var deserialize = function deserialize(content) {
  if (!content) {
    return [{
      children: [{
        text: ''
      }]
    }];
  }

  var parsed = new DOMParser().parseFromString(content, 'text/html');
  var result = deserializeNode(parsed.body);
  return [{
    children: result
  }];
};
var isSerialized = function isSerialized(content) {
  return typeof content === 'string';
};

var prefix$3 = 'addons.basicComponents.components.text.settings';
var settings$3 = {
  title: function title(t) {
    return t(prefix$3 + '.title', 'Text options');
  },
  fields: [{
    type: 'richtext',
    key: 'content',
    "default": [],
    label: function label(t) {
      return t(prefix$3 + '.content.title', 'Content');
    }
  }]
};

function ownKeys$8(object, enumerableOnly) { var keys$1 = keys(object); if (getOwnPropertySymbols) { var symbols = getOwnPropertySymbols(object); if (enumerableOnly) { symbols = filter(symbols).call(symbols, function (sym) { return getOwnPropertyDescriptor(object, sym).enumerable; }); } keys$1.push.apply(keys$1, symbols); } return keys$1; }

function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; forEach(_context = ownKeys$8(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (getOwnPropertyDescriptors) { defineProperties(target, getOwnPropertyDescriptors(source)); } else { var _context2; forEach(_context2 = ownKeys$8(Object(source))).call(_context2, function (key) { defineProperty(target, key, getOwnPropertyDescriptor(source, key)); }); } } return target; }
var TextNode = (function (_ref) {
  var text = _ref.text,
      bold = _ref.bold,
      code = _ref.code,
      color = _ref.color,
      italic = _ref.italic,
      size = _ref.size,
      underline = _ref.underline;

  if (text === '') {
    return o("br", {});
  }

  var props = indexOf(text).call(text, '\n') > -1 ? {
    dangerouslySetInnerHTML: {
      __html: text.replace('\n', '<br />')
    }
  } : {
    children: text
  };

  if (bold) {
    text = o("strong", _objectSpread$8({}, props));
  }

  if (code) {
    text = o("code", _objectSpread$8({}, props));
  }

  if (italic) {
    text = o("em", _objectSpread$8({}, props));
  }

  if (underline) {
    text = o("u", _objectSpread$8({}, props));
  }

  if (color) {
    text = o("span", _objectSpread$8({
      style: {
        color: color
      }
    }, props));
  }

  if (size) {
    text = o("span", _objectSpread$8({
      style: {
        fontSize: size
      }
    }, props));
  }

  return text;
});

var _excluded = ["type", "text", "children"];

function ownKeys$7(object, enumerableOnly) { var keys$1 = keys(object); if (getOwnPropertySymbols) { var symbols = getOwnPropertySymbols(object); if (enumerableOnly) { symbols = filter(symbols).call(symbols, function (sym) { return getOwnPropertyDescriptor(object, sym).enumerable; }); } keys$1.push.apply(keys$1, symbols); } return keys$1; }

function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; forEach(_context = ownKeys$7(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (getOwnPropertyDescriptors) { defineProperties(target, getOwnPropertyDescriptors(source)); } else { var _context2; forEach(_context2 = ownKeys$7(Object(source))).call(_context2, function (key) { defineProperty(target, key, getOwnPropertyDescriptor(source, key)); }); } } return target; }

var Node = function Node(_ref) {
  var _children;

  var type = _ref.type,
      text = _ref.text,
      children = _ref.children,
      rest = _objectWithoutProperties(_ref, _excluded);

  if (o$1(text)) {
    return o(TextNode, _objectSpread$7({
      text: text
    }, rest));
  }

  children = ((_children = children) === null || _children === void 0 ? void 0 : map(_children).call(_children, function (c, i) {
    return a(Node, _objectSpread$7(_objectSpread$7({}, c), {}, {
      key: i
    }));
  })) || null;

  switch (type) {
    case 'block-quote':
      return o("blockquote", {
        children: children
      });

    case 'bulleted-list':
      return o("ul", {
        children: children
      });

    case 'list-item':
      return o("li", {
        children: children
      });

    case 'numbered-list':
      return o("ol", {
        children: children
      });

    case 'text-center':
      return o("div", {
        style: {
          textAlign: 'center'
        },
        children: children
      });

    case 'text-right':
      return o("div", {
        style: {
          textAlign: 'right'
        },
        children: children
      });

    case 'text-justify':
      return o("div", {
        style: {
          textAlign: 'justify'
        },
        children: children
      });

    default:
      return children;
  }
};

function ownKeys$6(object, enumerableOnly) { var keys$1 = keys(object); if (getOwnPropertySymbols) { var symbols = getOwnPropertySymbols(object); if (enumerableOnly) { symbols = filter(symbols).call(symbols, function (sym) { return getOwnPropertyDescriptor(object, sym).enumerable; }); } keys$1.push.apply(keys$1, symbols); } return keys$1; }

function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; forEach(_context2 = ownKeys$6(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (getOwnPropertyDescriptors) { defineProperties(target, getOwnPropertyDescriptors(source)); } else { var _context3; forEach(_context3 = ownKeys$6(Object(source))).call(_context3, function (key) { defineProperty(target, key, getOwnPropertyDescriptor(source, key)); }); } } return target; }

var Text = function Text(_ref) {
  var _context;

  var element = _ref.element,
      className = _ref.className;
  return o("div", {
    className: className,
    children: typeof element.content === 'string' ? o(Node, {
      type: "paragraph",
      children: [{
        text: element.content
      }]
    }) : map(_context = element.content).call(_context, function (c, i) {
      return o(y, {
        children: [o(Node, _objectSpread$6({}, c)), i < element.content.length - 1 ? o("br", {}) : null]
      }, i);
    })
  });
};

Text.settings = settings$3;

var _context;
var prefix$2 = 'addons.basicComponents.components.title.settings';
var settings$2 = {
  title: function title(t) {
    return t(prefix$2 + '.title', 'Title options');
  },
  fields: [{
    type: 'select',
    key: 'headingLevel',
    "default": 'h1',
    label: function label(t) {
      return t(prefix$2 + '.type.title', 'Type');
    },
    options: map(_context = from({
      length: 6
    })).call(_context, function (_, i) {
      return {
        title: function title(t) {
          var _context2;

          return t(prefix$2 + '.type.value', 'Title') + concat(_context2 = " ".concat(i + 1, " (h")).call(_context2, i + 1, ")");
        },
        value: "h".concat(i + 1)
      };
    })
  }, {
    type: 'richtext',
    key: 'content',
    "default": '',
    label: function label(t) {
      return t(prefix$2 + '.content.title', 'Content');
    }
  }]
};

function ownKeys$5(object, enumerableOnly) { var keys$1 = keys(object); if (getOwnPropertySymbols) { var symbols = getOwnPropertySymbols(object); if (enumerableOnly) { symbols = filter(symbols).call(symbols, function (sym) { return getOwnPropertyDescriptor(object, sym).enumerable; }); } keys$1.push.apply(keys$1, symbols); } return keys$1; }

function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; forEach(_context2 = ownKeys$5(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (getOwnPropertyDescriptors) { defineProperties(target, getOwnPropertyDescriptors(source)); } else { var _context3; forEach(_context3 = ownKeys$5(Object(source))).call(_context3, function (key) { defineProperty(target, key, getOwnPropertyDescriptor(source, key)); }); } } return target; }

var Title = function Title(_ref) {
  var _context;

  var element = _ref.element,
      className = _ref.className;
  var Tag = element.headingLevel || 'h1';
  return o("div", {
    className: className,
    children: o(Tag, {
      children: typeof element.content === 'string' ? o(Node, {
        text: element.content
      }) : map(_context = element.content).call(_context, function (c, i) {
        return a(Node, _objectSpread$5(_objectSpread$5({}, c), {}, {
          key: i
        }));
      })
    })
  });
};

Title.settings = settings$2;

var prefix$1 = 'addons.basicComponents.components.image.settings';
var settings$1 = {
  title: function title(t) {
    return t(prefix$1 + '.title', 'Image options');
  },
  fields: [{
    type: 'image',
    key: 'url',
    "default": [],
    label: function label(t) {
      return t(prefix$1 + '.image.title', 'Image');
    }
  }]
};

var Image = function Image(_ref) {
  var element = _ref.element,
      className = _ref.className;

  var getName = function getName() {
    return element.name || (/data:/.test(element.url) ? o(Text$2, {
      name: "addons.basicComponents.components.image.local",
      "default": "Local image"
    }) : element.url) || o(Text$2, {
      name: "addons.basicComponents.components.image.empty",
      "default": "Empty image"
    });
  };

  return o("div", {
    className: className,
    children: [o("div", {
      className: "oak-image-preview",
      style: {
        backgroundImage: element.url ? "url(".concat(element.url, ")") : null
      }
    }), o("div", {
      className: "oak-image-info",
      children: o("div", {
        className: "oak-image-name",
        children: getName()
      })
    })]
  });
};

Image.settings = settings$1;

var prefix = 'addons.basicComponents.components.button.settings';
var settings = {
  title: function title(t) {
    return t(prefix + '.title', 'Button options');
  },
  fields: [{
    type: 'richtext',
    key: 'content',
    "default": '',
    label: function label(t) {
      return t(prefix + '.content.title', 'Content');
    }
  }, {
    type: 'select',
    key: 'action',
    "default": 'link',
    label: function label(t) {
      return t(prefix + '.action.title', 'Action');
    },
    options: [{
      title: function title(t) {
        return t(prefix + '.action.link', 'Open link');
      },
      value: 'link'
    }, {
      title: function title(t) {
        return t(prefix + '.action.event', 'Fire event');
      },
      value: 'event'
    }]
  }, {
    type: 'text',
    key: 'url',
    "default": '',
    label: function label(t) {
      return t(prefix + '.url.title', 'Link url');
    },
    condition: function condition(element) {
      return element.action === 'link';
    }
  }, {
    type: 'text',
    key: 'event',
    "default": '',
    label: function label(t) {
      return t(prefix + '.event.title', 'Event name');
    },
    condition: function condition(element) {
      return element.action === 'event';
    }
  }, {
    type: 'select',
    key: 'settings.buttonType',
    "default": 'button',
    label: function label(t) {
      return t(prefix + '.type.title', 'Type');
    },
    options: [{
      title: function title(t) {
        return t(prefix + '.type.button', 'Button');
      },
      value: 'button'
    }, {
      title: function title(t) {
        return t(prefix + '.type.link', 'Link');
      },
      value: 'link'
    }]
  }]
};

function ownKeys$4(object, enumerableOnly) { var keys$1 = keys(object); if (getOwnPropertySymbols) { var symbols = getOwnPropertySymbols(object); if (enumerableOnly) { symbols = filter(symbols).call(symbols, function (sym) { return getOwnPropertyDescriptor(object, sym).enumerable; }); } keys$1.push.apply(keys$1, symbols); } return keys$1; }

function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; forEach(_context2 = ownKeys$4(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (getOwnPropertyDescriptors) { defineProperties(target, getOwnPropertyDescriptors(source)); } else { var _context3; forEach(_context3 = ownKeys$4(Object(source))).call(_context3, function (key) { defineProperty(target, key, getOwnPropertyDescriptor(source, key)); }); } } return target; }

var Button = function Button(_ref) {
  var _context;

  var element = _ref.element,
      className = _ref.className;
  return o("div", {
    className: className,
    children: typeof element.content === 'string' ? o(Node, {
      text: element.content
    }) : map(_context = element.content).call(_context, function (c, i) {
      return a(Node, _objectSpread$4(_objectSpread$4({}, c), {}, {
        key: i
      }));
    })
  });
};

Button.settings = settings;

var COMPONENT_TITLE = {
  id: 'title',
  name: function name(t) {
    return t('addons.basicComponents.components.title.name', 'Title');
  },
  type: 'component',
  icon: 'title',
  render: Title,
  options: Title.options,
  settings: Title.settings,
  editable: true,
  serialize: function serialize$1(element) {
    return {
      content: serialize(element.content)
    };
  },
  deserialize: function deserialize$1(element) {
    return {
      content: deserialize(element.content)
    };
  },
  isSerialized: function isSerialized$1(element) {
    return isSerialized(element.content);
  },
  construct: function construct() {
    return {
      type: 'title',
      content: 'This is a title',
      headingLevel: 'h1',
      settings: {}
    };
  }
};
var COMPONENT_TEXT = {
  id: 'text',
  name: function name(t) {
    return t('addons.basicComponents.components.text.name', 'Text');
  },
  type: 'component',
  render: Text,
  icon: 'format_align_left',
  options: Text.options,
  settings: Text.settings,
  editable: true,
  serialize: function serialize$1(element) {
    return {
      content: serialize(element.content)
    };
  },
  deserialize: function deserialize$1(element) {
    return {
      content: deserialize(element.content)
    };
  },
  isSerialized: function isSerialized$1(element) {
    return isSerialized(element.content);
  },
  construct: function construct() {
    return {
      type: 'text',
      content: 'This is some fancy text content, you can even use ' + '<strong>html</strong> here',
      settings: {}
    };
  }
};
var COMPONENT_IMAGE = {
  id: 'image',
  name: function name(t) {
    return t('addons.basicComponents.components.image.name', 'Image');
  },
  type: 'component',
  render: Image,
  icon: 'image',
  options: Image.options,
  settings: Image.settings,
  editable: true,
  construct: function construct() {
    return {
      type: 'image',
      url: '',
      name: '',
      settings: {}
    };
  }
};
var COMPONENT_BUTTON = {
  id: 'button',
  name: function name(t) {
    return t('addons.basicComponents.components.button.name', 'Button');
  },
  type: 'component',
  render: Button,
  icon: 'view_comfy',
  options: Button.options,
  settings: Button.settings,
  editable: true,
  serialize: function serialize$1(element) {
    return {
      content: serialize(element.content)
    };
  },
  deserialize: function deserialize$1(element) {
    return {
      content: deserialize(element.content)
    };
  },
  isSerialized: function isSerialized$1(element) {
    return isSerialized(element.content);
  },
  construct: function construct() {
    return {
      type: 'button',
      content: 'Click me!',
      action: 'link',
      url: '',
      settings: {
        buttonType: 'button'
      }
    };
  }
};

var withHtml = function withHtml(editor) {
  var insertData = editor.insertData,
      isInline = editor.isInline,
      isVoid = editor.isVoid;

  editor.isInline = function (element) {
    return element.type === 'link' ? true : isInline(element);
  };

  editor.isVoid = function (element) {
    var _context;

    return includes(_context = ['style', 'script', 'image']).call(_context, element.type) || isVoid(element);
  };

  editor.insertData = function (data) {
    var html = data.getData('text/html');

    if (html) {
      var parsed = new DOMParser().parseFromString(html, 'text/html');
      var fragment = deserializeNode(parsed.body);
      Transforms.insertFragment(editor, fragment);
      return;
    }

    insertData(data);
  };

  return editor;
};
var isMarkActive = function isMarkActive(editor, format) {
  var _Editor$marks;

  return ((_Editor$marks = Editor$1.marks(editor)) === null || _Editor$marks === void 0 ? void 0 : _Editor$marks[format]) === true;
};

var isDefaultColor = function isDefaultColor(format, value) {
  return format === 'color' && value === '#000000';
};

var toggleMark = function toggleMark(editor, format) {
  var value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;

  if (isMarkActive(editor, format) || isDefaultColor(format, value)) {
    Editor$1.removeMark(editor, format);
  } else {
    Editor$1.addMark(editor, format, value);
  }
};
var isBlockActive = function isBlockActive(editor, format) {
  var _Editor$nodes = Editor$1.nodes(editor, {
    match: function match(n) {
      return !Editor$1.isEditor(n) && Element$1.isElement(n) && n.type === format;
    }
  }),
      _Editor$nodes2 = _slicedToArray(_Editor$nodes, 1),
      match = _Editor$nodes2[0];

  return !!match;
};
var toggleBlock = function toggleBlock(editor, format) {
  var isActive = isBlockActive(editor, format);
  var newProperty = {
    type: isActive ? 'paragraph' : format
  };
  Transforms.setNodes(editor, newProperty);
};

var BlockButton = (function (_ref) {
  var format = _ref.format,
      icon = _ref.icon,
      className = _ref.className;
  var editor = useSlate();

  var onClick = function onClick(e) {
    e.preventDefault();
    toggleBlock(editor, format);
  };

  return o("a", {
    href: "#",
    onClick: onClick,
    className: s('oak-toolbar-button', 'oak-' + format, {
      'oak-active': isBlockActive(editor, format)
    }, className),
    children: o("i", {
      className: "oak-icons",
      children: icon
    })
  });
});

function ownKeys$3(object, enumerableOnly) { var keys$1 = keys(object); if (getOwnPropertySymbols) { var symbols = getOwnPropertySymbols(object); if (enumerableOnly) { symbols = filter(symbols).call(symbols, function (sym) { return getOwnPropertyDescriptor(object, sym).enumerable; }); } keys$1.push.apply(keys$1, symbols); } return keys$1; }

function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; forEach(_context = ownKeys$3(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (getOwnPropertyDescriptors) { defineProperties(target, getOwnPropertyDescriptors(source)); } else { var _context2; forEach(_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { defineProperty(target, key, getOwnPropertyDescriptor(source, key)); }); } } return target; }
var Element = (function (_ref) {
  var attributes = _ref.attributes,
      children = _ref.children,
      element = _ref.element;

  switch (element.type) {
    case 'block-quote':
      return o("blockquote", _objectSpread$3(_objectSpread$3({}, attributes), {}, {
        children: children
      }));

    case 'bulleted-list':
      return o("ul", _objectSpread$3(_objectSpread$3({}, attributes), {}, {
        children: children
      }));

    case 'list-item':
      return o("li", _objectSpread$3(_objectSpread$3({}, attributes), {}, {
        children: children
      }));

    case 'numbered-list':
      return o("ol", _objectSpread$3(_objectSpread$3({}, attributes), {}, {
        children: children
      }));

    case 'text-left':
      return o("div", _objectSpread$3(_objectSpread$3({
        style: {
          textAlign: 'left'
        }
      }, attributes), {}, {
        children: children
      }));

    case 'text-center':
      return o("div", _objectSpread$3(_objectSpread$3({
        style: {
          textAlign: 'center'
        }
      }, attributes), {}, {
        children: children
      }));

    case 'text-right':
      return o("div", _objectSpread$3(_objectSpread$3({
        style: {
          textAlign: 'right'
        }
      }, attributes), {}, {
        children: children
      }));

    case 'text-justify':
      return o("div", _objectSpread$3(_objectSpread$3({
        style: {
          textAlign: 'justify'
        }
      }, attributes), {}, {
        children: children
      }));

    default:
      return o("div", _objectSpread$3(_objectSpread$3({}, attributes), {}, {
        children: children
      }));
  }
});

function ownKeys$2(object, enumerableOnly) { var keys$1 = keys(object); if (getOwnPropertySymbols) { var symbols = getOwnPropertySymbols(object); if (enumerableOnly) { symbols = filter(symbols).call(symbols, function (sym) { return getOwnPropertyDescriptor(object, sym).enumerable; }); } keys$1.push.apply(keys$1, symbols); } return keys$1; }

function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; forEach(_context = ownKeys$2(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (getOwnPropertyDescriptors) { defineProperties(target, getOwnPropertyDescriptors(source)); } else { var _context2; forEach(_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { defineProperty(target, key, getOwnPropertyDescriptor(source, key)); }); } } return target; }
var Leaf = (function (_ref) {
  var attributes = _ref.attributes,
      children = _ref.children,
      leaf = _ref.leaf;

  if (leaf.bold) {
    children = o("strong", {
      children: children
    });
  }

  if (leaf.code) {
    children = o("code", {
      children: children
    });
  }

  if (leaf.italic) {
    children = o("em", {
      children: children
    });
  }

  if (leaf.underline) {
    children = o("u", {
      children: children
    });
  }

  if (leaf.color) {
    children = o("span", {
      style: {
        color: leaf.color
      },
      children: children
    });
  }

  if (leaf.size) {
    children = o("span", {
      style: {
        fontSize: leaf.size
      },
      children: children
    });
  }

  return o("span", _objectSpread$2(_objectSpread$2({}, attributes), {}, {
    children: children
  }));
});

var ColorButton = (function (_ref) {
  var className = _ref.className;
  var editor = useSlate();
  var colorFieldRef = s$1();

  var _useState = l(editor.selection),
      _useState2 = _slicedToArray(_useState, 2),
      selection = _useState2[0],
      setSelection = _useState2[1];

  var _useState3 = l('#000000'),
      _useState4 = _slicedToArray(_useState3, 2),
      color = _useState4[0],
      setColor = _useState4[1];

  y$1(function () {
    if (!editor || !editor.selection) {
      return;
    }

    setSelection(editor.selection);
  }, [editor.selection]);

  var onChange = function onChange(field) {
    if (!selection) {
      return;
    }

    Transforms.select(editor, selection);
    setColor(field.value);
    toggleMark(editor, 'color', field.value);
  };

  var onClick = function onClick() {
    var _colorFieldRef$curren, _colorFieldRef$curren2;

    (_colorFieldRef$curren = colorFieldRef.current) === null || _colorFieldRef$curren === void 0 ? void 0 : (_colorFieldRef$curren2 = _colorFieldRef$curren.dropdownRef.current) === null || _colorFieldRef$curren2 === void 0 ? void 0 : _colorFieldRef$curren2.open();
    var selectedColor = getSelectedColor();
    setColor(selectedColor);
  };

  var getSelectedColor = function getSelectedColor() {
    var _selection$anchor, _selectedRow$children;

    var path = selection === null || selection === void 0 ? void 0 : (_selection$anchor = selection.anchor) === null || _selection$anchor === void 0 ? void 0 : _selection$anchor.path;
    var selectedRow = editor.children[path === null || path === void 0 ? void 0 : path[0]];
    var selectedContent = isArray(selectedRow) ? selectedRow[path === null || path === void 0 ? void 0 : path[1]] : selectedRow === null || selectedRow === void 0 ? void 0 : (_selectedRow$children = selectedRow.children) === null || _selectedRow$children === void 0 ? void 0 : _selectedRow$children[path === null || path === void 0 ? void 0 : path[1]];
    var selectedColor = (selectedContent === null || selectedContent === void 0 ? void 0 : selectedContent.color) || '#000000';
    return selectedColor;
  };

  return o(m$1, {
    children: [o(i, {
      tag: "span",
      children: o(g, {
        text: "Color",
        children: o("a", {
          href: "#",
          onClick: onClick,
          className: s('oak-toolbar-button', 'oak-color-button', className),
          children: o("i", {
            className: "oak-icons",
            style: {
              color: getSelectedColor()
            },
            children: "format_color_text"
          })
        })
      })
    }), o(l$1, {
      children: o(m, {
        ref: colorFieldRef,
        className: "oak-color-field py-3",
        value: color,
        onChange: onChange
      })
    })]
  });
});

var MarkButton = (function (_ref) {
  var format = _ref.format,
      icon = _ref.icon,
      tooltipText = _ref.tooltipText,
      className = _ref.className;
  var editor = useSlate();

  var onClick = function onClick(e) {
    e.preventDefault();
    toggleMark(editor, format);
  };

  return o(g, {
    text: tooltipText,
    children: o("a", {
      href: "#",
      onClick: onClick,
      className: s('oak-toolbar-button', 'oak-' + format, {
        'oak-active': isMarkActive(editor, format)
      }, className),
      children: o("i", {
        className: "oak-icons",
        children: icon
      })
    })
  });
});

var SizeButton = (function (_ref) {
  var _ref$increase = _ref.increase,
      increase = _ref$increase === void 0 ? true : _ref$increase,
      currentSize = _ref.currentSize,
      icon = _ref.icon,
      tooltipText = _ref.tooltipText,
      className = _ref.className;
  var editor = useSlate();

  var onClick = function onClick(e) {
    e.preventDefault();
    var updatedSize = increase ? _parseInt(currentSize) + 1 : _parseInt(currentSize) - 1;
    toggleMark(editor, 'size', "".concat(updatedSize, "px"));
  };

  return o(g, {
    text: tooltipText,
    children: o("a", {
      href: "#",
      onClick: onClick,
      className: s('oak-toolbar-button', 'oak-size-button', className),
      children: o("i", {
        className: "oak-icons",
        children: icon
      })
    })
  });
});

function ownKeys$1(object, enumerableOnly) { var keys$1 = keys(object); if (getOwnPropertySymbols) { var symbols = getOwnPropertySymbols(object); if (enumerableOnly) { symbols = filter(symbols).call(symbols, function (sym) { return getOwnPropertyDescriptor(object, sym).enumerable; }); } keys$1.push.apply(keys$1, symbols); } return keys$1; }

function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; forEach(_context2 = ownKeys$1(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (getOwnPropertyDescriptors) { defineProperties(target, getOwnPropertyDescriptors(source)); } else { var _context3; forEach(_context3 = ownKeys$1(Object(source))).call(_context3, function (key) { defineProperty(target, key, getOwnPropertyDescriptor(source, key)); }); } } return target; }
var HOTKEYS = {
  'mod+b': 'bold',
  'mod+i': 'italic',
  'mod+u': 'underline'
};
var Editor = (function (_ref) {
  var value = _ref.value,
      onChange = _ref.onChange;
  var renderElement = A(function (props) {
    return o(Element, _objectSpread$1({}, props));
  }, []);
  var renderLeaf = A(function (props) {
    return o(Leaf, _objectSpread$1({}, props));
  }, []);
  var editor = d(function () {
    return withHtml(withHistory(withReact(createEditor())));
  }, []);

  var _useReducer = p(t, {
    value: value || [{
      children: [{
        text: ''
      }]
    }]
  }),
      _useReducer2 = _slicedToArray(_useReducer, 2),
      state = _useReducer2[0],
      dispatch = _useReducer2[1];

  y$1(function () {
    if (value) {
      dispatch({
        value: value
      });
    }
  }, [value]);

  var onChange_ = function onChange_(val) {
    dispatch({
      value: val
    });
    onChange === null || onChange === void 0 ? void 0 : onChange({
      value: val
    });
  };

  var onKeyDown = function onKeyDown(e) {
    var _context;

    forEach(_context = entries(HOTKEYS)).call(_context, function (_ref2) {
      var _ref3 = _slicedToArray(_ref2, 2),
          key = _ref3[0],
          mark = _ref3[1];

      if (_default(key, e)) {
        e.preventDefault();
        toggleMark(editor, mark);
      }
    });
  };

  var getTextSize = function getTextSize() {
    var _editor$selection, _editor$selection$anc, _selectedRow$children, _selectedContent$size;

    var path = (_editor$selection = editor.selection) === null || _editor$selection === void 0 ? void 0 : (_editor$selection$anc = _editor$selection.anchor) === null || _editor$selection$anc === void 0 ? void 0 : _editor$selection$anc.path;
    var selectedRow = editor.children[path === null || path === void 0 ? void 0 : path[0]];
    var selectedContent = isArray(selectedRow) ? selectedRow[path === null || path === void 0 ? void 0 : path[1]] : selectedRow === null || selectedRow === void 0 ? void 0 : (_selectedRow$children = selectedRow.children) === null || _selectedRow$children === void 0 ? void 0 : _selectedRow$children[path === null || path === void 0 ? void 0 : path[1]];

    var selectedSize = _parseInt(selectedContent === null || selectedContent === void 0 ? void 0 : (_selectedContent$size = selectedContent.size) === null || _selectedContent$size === void 0 ? void 0 : _selectedContent$size.split('p')[0]);

    return selectedSize || 16;
  };

  return o(Slate, {
    editor: editor,
    value: state.value,
    onChange: onChange_,
    children: o("div", {
      className: "oak-text-editor",
      children: [o("div", {
        className: "oak-toolbar",
        children: [o(MarkButton, {
          format: "bold",
          icon: "format_bold",
          tooltipText: "Bold"
        }), o(MarkButton, {
          format: "italic",
          icon: "format_italic",
          tooltipText: "Italic"
        }), o(MarkButton, {
          format: "underline",
          icon: "format_underlined",
          tooltipText: "Underline"
        }), o(ColorButton, {}), o(SizeButton, {
          icon: "horizontal_rule",
          increase: false,
          currentSize: getTextSize(),
          tooltipText: "Decrease size"
        }), o("span", {
          className: "oak-text-size",
          children: getTextSize()
        }), o(SizeButton, {
          icon: "add",
          currentSize: getTextSize(),
          tooltipText: "Increase size"
        }), o(BlockButton, {
          format: "text-left",
          icon: "format_align_left",
          tooltipText: "Align left"
        }), o(BlockButton, {
          format: "text-center",
          icon: "format_align_center",
          tooltipText: "Align center"
        }), o(BlockButton, {
          format: "text-right",
          icon: "format_align_right",
          tooltipText: "Align right"
        }), o(BlockButton, {
          format: "text-justify",
          icon: "format_align_justify",
          tooltipText: "Align justify"
        })]
      }), o(Editable$1, {
        onDrop: function onDrop(e) {
          return e.preventDefault();
        },
        renderElement: renderElement,
        renderLeaf: renderLeaf,
        spellCheck: false,
        onKeyDown: onKeyDown,
        className: "oak-text-editable"
      })]
    })
  });
});

var ImageField = (function (_ref) {
  var className = _ref.className,
      value = _ref.value,
      onChange = _ref.onChange,
      _ref$accept = _ref.accept,
      accept = _ref$accept === void 0 ? ['image/jpeg', 'image/jpg', 'image/png', 'image/svg+xml'] : _ref$accept;

  var _useOptions = useOptions(),
      events = _useOptions.events;

  var _useElement = useElement(),
      element = _useElement.element;

  var _useReducer = p(oa, {
    value: (element === null || element === void 0 ? void 0 : element.url) || '',
    name: (element === null || element === void 0 ? void 0 : element.name) || '',
    loading: false
  }),
      _useReducer2 = _slicedToArray(_useReducer, 2),
      state = _useReducer2[0],
      dispatch = _useReducer2[1];

  y$1(function () {
    if (value) {
      dispatch({
        value: value
      });
    }
  }, [value]);
  y$1(function () {
    if (element.name) {
      dispatch({
        name: element.name
      });
    }
  }, [element === null || element === void 0 ? void 0 : element.name]);

  var onOpenFileDialog = function onOpenFileDialog(e) {
    e.preventDefault();

    if (state.loading) {
      return;
    }

    var input = document.createElement('input');
    input.type = 'file';
    input.accept = accept.join(',');
    input.addEventListener('change', onFile, false);
    input.click();
  };

  var onFile = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(e) {
      var result, file, fr;
      return regenerator.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (!state.loading) {
                _context.next = 2;
                break;
              }

              return _context.abrupt("return");

            case 2:
              dispatch({
                loading: true
              });

              if (!(events !== null && events !== void 0 && events.onImageUpload)) {
                _context.next = 10;
                break;
              }

              _context.next = 6;
              return events.onImageUpload(event);

            case 6:
              result = _context.sent;
              onUrlReady(result);
              _context.next = 12;
              break;

            case 10:
              file = e.target.files[0];

              if (file) {
                fr = new FileReader();
                fr.readAsDataURL(file);

                fr.onload = function () {
                  onUrlReady({
                    url: fr.result,
                    name: file.name
                  });
                };
              } else {
                dispatch({
                  loading: false
                });
              }

            case 12:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    return function onFile(_x) {
      return _ref2.apply(this, arguments);
    };
  }();

  var onUrlReady = function onUrlReady() {
    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
        url = _ref3.url,
        name = _ref3.name;

    dispatch({
      value: url,
      name: name
    });
    onChange === null || onChange === void 0 ? void 0 : onChange({
      value: url,
      name: name
    });
    dispatch({
      loading: false
    });
  };

  var onReset = function onReset(e) {
    e.preventDefault();
    dispatch({
      value: null,
      name: null
    });
    onChange === null || onChange === void 0 ? void 0 : onChange({
      value: null,
      name: null
    });
  };

  var getName = function getName() {
    return state.name || (/data:/.test(state.value) ? 'Local image' : state.value) || 'Empty image';
  };

  return o("div", {
    className: ea('oak-image-field', {
      'oak-loading': state.loading
    }, className),
    children: state.value ? o(y, {
      children: [o("div", {
        className: "oak-image-field-preview",
        style: {
          backgroundImage: "url(".concat(state.value, ")")
        }
      }), o("div", {
        className: "oak-image-field-info",
        children: [o("div", {
          className: "oak-image-name",
          children: getName()
        }), o("div", {
          className: "oak-image-field-actions",
          children: o("a", {
            href: "#",
            className: "oak-delete",
            onClick: onReset,
            children: o(Text$2, {
              name: "addons.basicComponents.fields.image.del",
              "default": "Delete"
            })
          })
        })]
      })]
    }) : o(r, {
      disabled: state.loading,
      onClick: onOpenFileDialog,
      children: state.loading ? o(o$2, {}) : o(y, {
        children: [o("i", {
          className: "oak-icons",
          children: "add"
        }), o("span", {
          children: o(Text$2, {
            name: "addons.basicComponents.fields.image.add",
            "default": "Add an image"
          })
        })]
      })
    })
  });
});

var fr = {
  addons: {
    basicComponents: {
      fields: {
        image: {
          add: 'Ajouter une image',
          del: 'Supprimer'
        }
      },
      components: {
        title: {
          name: 'Titre',
          settings: {
            title: 'Options de titre',
            type: {
              title: 'Type',
              value: 'Titre'
            },
            content: {
              title: 'Contenu'
            }
          }
        },
        text: {
          name: 'Texte',
          settings: {
            title: 'Options de texte',
            content: {
              title: 'Contenu'
            }
          }
        },
        image: {
          name: 'Image',
          empty: 'Image vide',
          local: 'Image locale',
          settings: {
            title: 'Options d\'image',
            image: {
              title: 'Image'
            }
          }
        },
        button: {
          name: 'Bouton',
          settings: {
            title: 'Options de bouton',
            content: {
              title: 'Contenu'
            },
            action: {
              title: 'Action',
              link: 'Ouvrir un lien',
              event: 'Déclencher un évènement'
            },
            url: {
              title: 'URL du lien'
            },
            event: {
              title: 'Nom de l\'évènement javascript'
            },
            type: {
              title: 'Type d\'élément HTML',
              button: 'Bouton',
              link: 'Lien'
            }
          }
        }
      }
    }
  }
};

function ownKeys(object, enumerableOnly) { var keys$1 = keys(object); if (getOwnPropertySymbols) { var symbols = getOwnPropertySymbols(object); if (enumerableOnly) { symbols = filter(symbols).call(symbols, function (sym) { return getOwnPropertyDescriptor(object, sym).enumerable; }); } keys$1.push.apply(keys$1, symbols); } return keys$1; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; forEach(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (getOwnPropertyDescriptors) { defineProperties(target, getOwnPropertyDescriptors(source)); } else { var _context2; forEach(_context2 = ownKeys(Object(source))).call(_context2, function (key) { defineProperty(target, key, getOwnPropertyDescriptor(source, key)); }); } } return target; }
var index = {
  fieldTypes: [{
    type: 'richtext',
    serialize: serialize,
    deserialize: deserialize,
    render: function render(props) {
      return o(Editor, _objectSpread({}, props));
    }
  }, {
    type: 'image',
    onChange: function onChange(key, _ref) {
      var value = _ref.value,
          name = _ref.name;
      return {
        name: name || '',
        url: value || ''
      };
    },
    render: function render(props) {
      return o(ImageField, _objectSpread({}, props));
    }
  }],
  components: [{
    group: 'core',
    component: COMPONENT_TITLE
  }, {
    group: 'core',
    component: COMPONENT_TEXT
  }, {
    group: 'core',
    component: COMPONENT_IMAGE
  }, {
    group: 'core',
    component: COMPONENT_BUTTON
  }]
};

export default index;
export { fr as localeFr };
//# sourceMappingURL=index.js.map
