@ccs-ui/rc-pro 2.4.6 → 2.4.7-beta.2

package/es/editor/lexical/base/index.less

@@ -0,0 +1,304 @@
+.css-editor-rich {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .ccs-editor-toolbar {
+    flex-shrink: 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: 2px 4px;
+    gap: 4px 0;
+  }
+
+  .ccs-editor-gutter {
+    flex: 0 0 24px;
+    width: 24px;
+    padding: 4px 0;
+    background-color: #f5f5f5;
+
+    & > div {
+      text-align: center;
+      color: #6c6c6c;
+      background-color: #f5f5f5;
+      line-height: 1.5;
+    }
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .editor-inner {
+    position: relative;
+    flex: 1 1 auto;
+    overflow: auto;
+  }
+
+  .editor-input {
+    resize: none;
+    font-size: 14px;
+    position: relative;
+    tab-size: 1;
+    outline: 0;
+    caret-color: #444;
+    counter-reset: line-number;
+    box-sizing: border-box;
+  }
+
+  .editor-placeholder {
+    overflow: hidden;
+    position: absolute;
+    text-overflow: ellipsis;
+    user-select: none;
+    display: inline-block;
+    pointer-events: none;
+  }
+
+  .editor-text-bold {
+    font-weight: bold;
+  }
+
+  .editor-text-italic {
+    font-style: italic;
+  }
+
+  .editor-text-underline {
+    text-decoration: underline;
+  }
+
+  .editor-text-strikethrough {
+    text-decoration: line-through;
+  }
+
+  .editor-text-underlinetrikethrough {
+    text-decoration: underline line-through;
+  }
+
+  .editor-text-code {
+    background-color: rgb(240, 242, 245);
+    padding: 1px 0.25rem;
+    font-family: Menlo, Consolas, Monaco, monospace;
+    font-size: 94%;
+  }
+
+  .editor-link {
+    color: rgb(33, 111, 219);
+    text-decoration: none;
+  }
+
+  .tree-view-output {
+    display: block;
+    background: #222;
+    color: #fff;
+    padding: 5px;
+    font-size: 12px;
+    white-space: pre-wrap;
+    margin: 1px auto 10px;
+    max-height: 250px;
+    position: relative;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    overflow: auto;
+    line-height: 14px;
+  }
+
+  .editor-code {
+    background-color: rgb(240, 242, 245);
+    font-family: Menlo, Consolas, Monaco, monospace;
+    display: block;
+    padding: 8px 8px 8px 52px;
+    line-height: 1.53;
+    font-size: 13px;
+    margin: 0;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    tab-size: 2;
+
+    /* white-space: pre; */
+    overflow-x: auto;
+    position: relative;
+  }
+
+  .editor-code::before {
+    content: attr(data-gutter);
+    position: absolute;
+    background-color: #eee;
+    left: 0;
+    top: 0;
+    border-right: 1px solid #ccc;
+    padding: 8px;
+    color: #777;
+    white-space: pre-wrap;
+    text-align: right;
+    min-width: 25px;
+  }
+
+  .editor-code::after {
+    content: attr(data-highlight-language);
+    top: 0;
+    right: 3px;
+    padding: 3px;
+    font-size: 10px;
+    text-transform: uppercase;
+    position: absolute;
+    color: rgba(0, 0, 0, 50%);
+  }
+
+  // .editor-tokenComment {
+  //   color: slategray;
+  // }
+
+  // .editor-tokenPunctuation {
+  //   color: #999;
+  // }
+
+  // .editor-tokenProperty {
+  //   color: #905;
+  // }
+
+  // .editor-tokenSelector {
+  //   color: #690;
+  // }
+
+  // .editor-tokenOperator {
+  //   color: #9a6e3a;
+  // }
+
+  // .editor-tokenAttr {
+  //   color: #07a;
+  // }
+
+  // .editor-tokenVariable {
+  //   color: #e90;
+  // }
+
+  // .editor-tokenFunction {
+  //   color: #dd4a68;
+  // }
+
+  .editor-paragraph {
+    margin: 0;
+    // margin-bottom: 8px;
+    position: relative;
+  }
+
+  .editor-paragraph:last-child {
+    margin-bottom: 0;
+  }
+
+  .editor-heading-h1 {
+    font-size: 24px;
+    color: rgb(5, 5, 5);
+    font-weight: 400;
+    margin: 0;
+    margin-bottom: 12px;
+    padding: 0;
+  }
+
+  .editor-heading-h2 {
+    font-size: 15px;
+    color: rgb(101, 103, 107);
+    font-weight: 700;
+    margin: 0;
+    margin-top: 10px;
+    padding: 0;
+    text-transform: uppercase;
+  }
+
+  .editor-quote {
+    margin: 0;
+    margin-left: 20px;
+    font-size: 15px;
+    color: rgb(101, 103, 107);
+    border-left: 4px solid rgb(206, 208, 212);
+    padding-left: 16px;
+  }
+
+  .editor-list-ol {
+    padding: 0;
+    margin: 0;
+    margin-left: 16px;
+  }
+
+  .editor-list-ul {
+    padding: 0;
+    margin: 0;
+    margin-left: 16px;
+  }
+
+  .editor-listitem {
+    margin: 8px 32px;
+  }
+
+  .editor-nested-listitem {
+    list-style-type: none;
+  }
+
+  pre::-webkit-scrollbar {
+    background: transparent;
+    width: 10px;
+  }
+
+  pre::-webkit-scrollbar-thumb {
+    background: #999;
+  }
+
+  .debug-timetravel-panel {
+    overflow: hidden;
+    padding: 0 0 10px;
+    margin: auto;
+    display: flex;
+  }
+
+  .debug-timetravel-panel-slider {
+    padding: 0;
+    flex: 8;
+  }
+
+  .debug-timetravel-panel-button {
+    padding: 0;
+    border: 0;
+    background: none;
+    flex: 1;
+    color: #fff;
+    font-size: 12px;
+  }
+
+  .debug-timetravel-panel-button:hover {
+    text-decoration: underline;
+  }
+
+  .debug-timetravel-button {
+    border: 0;
+    padding: 0;
+    font-size: 12px;
+    top: 10px;
+    right: 15px;
+    position: absolute;
+    background: none;
+    color: #fff;
+  }
+
+  .debug-timetravel-button:hover {
+    text-decoration: underline;
+  }
+}
+
+.css-editor-code {
+  position: absolute;
+  inset: 0;
+  z-index: 9999;
+
+  &-content {
+    height: 100%;
+    position: relative;
+  }
+
+  &-btn {
+    position: absolute;
+    right: 4px;
+    top: 4px;
+  }
+}

package/es/editor/lexical/base/styleConfig.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare const parseAllowedFontSize: (input: string) => string;
+export declare function parseAllowedColor(input: string): string;

package/es/editor/lexical/base/styleConfig.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+var MIN_ALLOWED_FONT_SIZE = 8;
+var MAX_ALLOWED_FONT_SIZE = 72;
+export var parseAllowedFontSize = function parseAllowedFontSize(input) {
+  var match = input.match(/^(\d+(?:\.\d+)?)px$/);
+  if (match) {
+    var n = Number(match[1]);
+    if (n >= MIN_ALLOWED_FONT_SIZE && n <= MAX_ALLOWED_FONT_SIZE) {
+      return input;
+    }
+  }
+  return '';
+};
+export function parseAllowedColor(input) {
+  return /^rgb\(\d+, \d+, \d+\)$/.test(input) ? input : '';
+}

package/es/editor/lexical/base/toolbar/code.d.ts

@@ -0,0 +1,5 @@
+export default function CodeEdit({ onClose, onOk, code, }: {
+    code: string;
+    onClose: () => void;
+    onOk: (html: string) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/es/editor/lexical/base/toolbar/code.js

@@ -0,0 +1,59 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import { Button, Input, theme } from 'antd';
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function CodeEdit(_ref) {
+  var onClose = _ref.onClose,
+    onOk = _ref.onOk,
+    code = _ref.code;
+  var _useState = useState(code),
+    _useState2 = _slicedToArray(_useState, 2),
+    codeEdit = _useState2[0],
+    setCodeEdit = _useState2[1];
+  var _theme$useToken = theme.useToken(),
+    token = _theme$useToken.token;
+  return /*#__PURE__*/_jsx("div", {
+    className: "css-editor-code",
+    style: {
+      background: token.colorBgContainer
+    },
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "css-editor-code-content",
+      children: [/*#__PURE__*/_jsx(Input.TextArea, {
+        style: {
+          height: '100%'
+        },
+        variant: "filled",
+        value: codeEdit,
+        onChange: function onChange(e) {
+          return setCodeEdit(e.target.value);
+        }
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "css-editor-code-btn",
+        children: [/*#__PURE__*/_jsx(Button, {
+          onClick: onClose,
+          icon: /*#__PURE__*/_jsx(CloseOutlined, {}),
+          size: "small",
+          children: "\u8FD4\u56DE"
+        }), /*#__PURE__*/_jsx(Button, {
+          style: {
+            marginLeft: 10
+          },
+          icon: /*#__PURE__*/_jsx(CheckOutlined, {}),
+          onClick: function onClick() {
+            return onOk(codeEdit);
+          },
+          size: "small",
+          children: "\u4FDD\u5B58"
+        })]
+      })]
+    })
+  });
+}

package/es/editor/lexical/base/toolbar/index.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties } from 'react';
+type PropsType = {
+    style: CSSProperties;
+    disabled?: boolean;
+};
+export default function ToolbarPlugin({ style, disabled }: PropsType): import("react/jsx-runtime").JSX.Element;
+export {};