@wpmvc/classic-editor/build/classic-editor.es.js

A React component for integrating WordPress' classic editor using wp.editor API

import { jsx as c } from "react/jsx-runtime";
import { useState as w, useRef as h, useMemo as g, useEffect as n } from "@wordpress/element";
import x from "styled-components";
const v = x.div`
	${(t) => t.$extend && `
		border: 1px solid #dadbdd;
		border-radius: 8px;
		overflow: hidden;
		position: relative;
		background-color: #fff;

		.wp-editor-tabs,
		.wp-media-buttons {
			padding: 8px;
		}

		.wp-editor-container {
			border: 0;
		}

		.wp-switch-editor {
			height: auto;
			margin: 0 0 0 4px;
			background-color: transparent;
			padding: 7px 14px;
			font-size: 14px;
			border-radius: 5px;
			line-height: inherit;
			border-color: transparent;
			float: none;
			font-weight: 500;
		}

		.tmce-active .switch-tmce,
		.html-active .switch-html {
			background-color: #ededed;
			border-color: #dadbdd;
			color: #1e1f21;
		}

		.mce-top-part {
			background: #f1f1f0;

			&:before {
				box-shadow: none;
			}
		}

		.mce-toolbar-grp {
			border: 0;
		}

		.wpmvc-classic-editor {
			padding: 15px;
			border: none;

			&:focus {
				box-shadow: none;
				border: none;
			}
		}
	`}

	.mce-toolbar .mce-btn i {
		font-family: 'dashicons' !important;
	}

	.mce-ico {
		font-family: 'tinymce', Arial !important;
	}

	.wpmvc-classic-editor {
		visibility: visible !important;
		width: 100%;
	}
`;
function C({
  value: t,
  onChange: s,
  height: l = 250,
  useExtendStyles: p = !1,
  hasMedia: m = !0
}) {
  var a;
  const [d, f] = w(!1), e = h(null), r = g(
    () => `wp_editor_${Date.now() + Math.floor(Math.random() * 1e3)}`,
    []
  ), i = !!((a = window.wp) != null && a.editor), u = (o) => {
    e.current = o, o.on("init", () => {
      o.setContent(t);
    }), o.on("change", () => {
      s(o.getContent());
    }), f(!0);
  }, b = () => {
    window.wp.editor.remove(r), window.wp.editor.initialize(r, {
      tinymce: {
        height: l,
        toolbar1: "formatselect,table,bold,italic,bullist,numlist,link,blockquote,alignleft,aligncenter,alignright,underline,strikethrough,forecolor,removeformat,codeformat,outdent,indent,undo,redo",
        menubar: !1,
        setup: u
      },
      quicktags: !0,
      mediaButtons: m
    });
  };
  return n(() => {
    e.current && t !== e.current.getContent() && e.current.setContent(t);
  }, [t]), n(() => {
    d && setTimeout(() => {
      e.current.setContent(t);
    }, 500);
  }, [d]), n(() => (i && b(), () => {
    i && window.wp.editor.remove(r);
  }), [i]), /* @__PURE__ */ c(v, { $extend: p, children: /* @__PURE__ */ c("textarea", { className: "wpmvc-classic-editor", id: r }) });
}
export {
  C as default
};