usfm-editor/dist/components/ToolbarButton.js

A WYSIWYG editor component for USFM

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ToolbarButton = void 0;

var React = _interopRequireWildcard(require("react"));

var _core = require("@material-ui/core");

var _UsfmMarkers = require("../utils/UsfmMarkers");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const ToolbarButton = ({
  editor,
  buttonSpec,
  buttonLabel
}) => {
  const {
    icon,
    cssClass,
    actionSpec
  } = buttonSpec;
  return /*#__PURE__*/React.createElement(_core.Tooltip, {
    title: buttonLabel,
    enterDelay: 500
  }, /*#__PURE__*/React.createElement(_core.Button, {
    disableRipple: true,
    disableFocusRipple: true,
    "aria-label": buttonLabel.toLowerCase(),
    disabled: isDisabled(actionSpec, editor),
    onMouseDown: event => onClick(event, actionSpec, editor),
    className: `usfm-editor-toolbar-button usfm-editor-toolbar-button-${isActive(actionSpec, editor) ? "active" : "inactive"} ${cssClass}`.trim()
  }, typeof icon == "string" ? icon : /*#__PURE__*/React.createElement(_core.Icon, {
    component: icon,
    className: "usfm-editor-toolbar-icon"
  })));
};

exports.ToolbarButton = ToolbarButton;

const isDisabled = (actionSpec, editor) => {
  if (!editor || !actionSpec) {
    return true;
  }

  return actionSpec.buttonType == "ParagraphButton" && editor.getParagraphTypesAtSelection().length > 1;
};

const isActive = (actionSpec, editor) => {
  if (!editor || !actionSpec) {
    return false;
  }

  switch (actionSpec.buttonType) {
    case "ActionButton":
      return actionSpec.isActive(editor);

    case "MarkButton":
      return isMarkActive(editor, actionSpec.usfmMarker);

    case "ParagraphButton":
      return isBlockActive(editor, actionSpec.usfmMarker);
  }
};

const onClick = (event, actionSpec, editor) => {
  event.preventDefault();

  switch (actionSpec.buttonType) {
    case "ActionButton":
      actionSpec.action(editor);
      return;

    case "MarkButton":
      toggleMarkAtCursor(editor, actionSpec.usfmMarker);
      if (actionSpec.additionalAction) actionSpec.additionalAction(editor);
      return;

    case "ParagraphButton":
      toggleParagraphTypeAtCursor(editor, actionSpec.usfmMarker);
      if (actionSpec.additionalAction) actionSpec.additionalAction(editor);
      return;
  }
};

const toggleMarkAtCursor = (editor, mark) => {
  const isActive = isMarkActive(editor, mark);

  if (isActive) {
    editor.removeMarkAtSelection(mark);
  } else {
    editor.addMarkAtSelection(mark);
  }
};

const toggleParagraphTypeAtCursor = (editor, marker) => {
  const isActive = isBlockActive(editor, marker);

  if (isActive) {
    editor.setParagraphTypeAtSelection(_UsfmMarkers.UsfmMarkers.PARAGRAPHS.p);
  } else {
    editor.setParagraphTypeAtSelection(marker);
  }
};

const isMarkActive = (editor, mark) => {
  const marks = editor.getMarksAtSelection();
  return marks.includes(mark);
};

const isBlockActive = (editor, marker) => {
  const types = editor.getParagraphTypesAtSelection();
  return types.includes(marker);
};