@remarkablejames/editor 0.0.1 → 0.0.2

package/lib/Video-Bpd8W8l6.js

@@ -0,0 +1,231 @@
+import { N as I } from "./clsx-m_C5j3RU.js";
+import { u as $, V as H } from "./index-4Q5IhypJ.js";
+import { f as S, u as R, c as z, i as B, k as N } from "./useButtonProps-BE10eHkG.js";
+import { jsxs as d, jsx as s } from "react/jsx-runtime";
+import { useState as y, useRef as E, useMemo as U } from "react";
+import { A as j } from "./toggle-DoJTBdvy.js";
+import { D as F, a as O, b as Z, c as _ } from "./dialog-QWWUWOGP.js";
+import { T as q, a as W, b as L, c as M } from "./tabs-BeHxylKH.js";
+import { B as T } from "./button-CDIxPURh.js";
+import { I as G } from "./input-qvpuOf-3.js";
+function J(e, t) {
+  let o;
+  try {
+    o = new URL(e);
+  } catch {
+    return !1;
+  }
+  return !(t != null && t.length) || t.length === 1 && t[0] === "." ? !0 : t.some((n) => {
+    if (n.includes("*")) {
+      const a = n.replace(/\./g, String.raw`\.`).replace(/\*/g, ".*");
+      return new RegExp(`^${a}$`).test(o.hostname);
+    }
+    return o.hostname.includes(n);
+  });
+}
+function ne() {
+  const { t: e } = $(), t = S(), o = R(k.name), { icon: n, tooltip: a } = (o == null ? void 0 : o.componentProps) ?? {}, { editorDisabled: c } = z(), [u, v] = y(""), b = E(null), [g, h] = y(""), [x, p] = y(!1), m = B(k.name), i = U(() => (m == null ? void 0 : m.options) ?? {}, [m]);
+  async function D(r) {
+    var V;
+    const l = (V = r == null ? void 0 : r.target) == null ? void 0 : V.files;
+    if (!t || t.isDestroyed || l.length === 0)
+      return;
+    const f = l[0];
+    let w = "";
+    i.upload ? w = await i.upload(f) : w = URL.createObjectURL(f), t.chain().focus().setVideo({
+      src: w,
+      width: "100%"
+    }).run(), p(!1);
+  }
+  function A(r) {
+    r.preventDefault(), r.stopPropagation(), u && (t.chain().focus().setVideo({
+      src: u,
+      width: "100%"
+    }).run(), p(!1), v(""));
+  }
+  function C(r) {
+    var l;
+    r.preventDefault(), (l = b.current) == null || l.click();
+  }
+  return /* @__PURE__ */ d(F, { onOpenChange: p, open: x, children: [
+    /* @__PURE__ */ s(O, { asChild: !0, children: /* @__PURE__ */ s(
+      j,
+      {
+        disabled: c,
+        icon: n,
+        tooltip: a,
+        action: () => {
+          c || p(!0);
+        }
+      }
+    ) }),
+    /* @__PURE__ */ d(Z, { children: [
+      /* @__PURE__ */ s(_, { children: e("editor.video.dialog.title") }),
+      /* @__PURE__ */ d(
+        q,
+        {
+          activationMode: "manual",
+          defaultValue: (i == null ? void 0 : i.resourceVideo) === "both" || (i == null ? void 0 : i.resourceVideo) === "upload" ? "upload" : "link",
+          children: [
+            /* @__PURE__ */ d(W, { className: "richtext-grid richtext-w-full richtext-grid-cols-2", children: [
+              ((i == null ? void 0 : i.resourceVideo) === "both" || (i == null ? void 0 : i.resourceVideo) === "upload") && /* @__PURE__ */ s(L, { value: "upload", children: e("editor.video.dialog.tab.upload") }),
+              ((i == null ? void 0 : i.resourceVideo) === "both" || (i == null ? void 0 : i.resourceVideo) === "link") && /* @__PURE__ */ s(L, { value: "link", children: e("editor.video.dialog.link") })
+            ] }),
+            /* @__PURE__ */ d(M, { value: "upload", children: [
+              /* @__PURE__ */ s("div", { className: "richtext-flex richtext-items-center richtext-gap-[10px]", children: /* @__PURE__ */ s(T, { className: "richtext-mt-1 richtext-w-full", onClick: C, size: "sm", children: e("editor.video.dialog.tab.upload") }) }),
+              /* @__PURE__ */ s(
+                "input",
+                {
+                  accept: "video/*",
+                  multiple: !0,
+                  onChange: D,
+                  ref: b,
+                  type: "file",
+                  style: {
+                    display: "none"
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ d(M, { value: "link", children: [
+              /* @__PURE__ */ s("div", { children: /* @__PURE__ */ d("div", { className: "richtext-flex richtext-items-center richtext-gap-2", children: [
+                /* @__PURE__ */ s(
+                  G,
+                  {
+                    autoFocus: !0,
+                    placeholder: e("editor.video.dialog.placeholder"),
+                    required: !0,
+                    type: "url",
+                    value: u,
+                    onBlur: (r) => {
+                      const l = r.target.value, f = i.videoProviders || ["."];
+                      l && !J(l, f) ? h("Invalid video URL") : h("");
+                    },
+                    onChange: (r) => {
+                      v(r.target.value);
+                    }
+                  }
+                ),
+                /* @__PURE__ */ s(T, { onClick: A, type: "button", children: e("editor.video.dialog.button.apply") })
+              ] }) }),
+              g && /* @__PURE__ */ s("div", { className: "richtext-my-[5px] richtext-text-red-500", children: g })
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function K(e) {
+  e = e.replace("https://youtu.be/", "https://www.youtube.com/watch?v=").replace("watch?v=", "embed/");
+  const t = e.match(/^https:\/\/www\.youtube\.com\/shorts\/([a-zA-Z0-9_-]+)/);
+  t && (e = `https://www.youtube.com/embed/${t[1]}`);
+  const o = e.match(/^https:\/\/vimeo\.com\/(\d+)(?:\/([a-zA-Z0-9]+))?/);
+  if (o) {
+    const a = o[1], c = o[2];
+    c ? e = `https://player.vimeo.com/video/${a}?h=${c}` : e = `https://player.vimeo.com/video/${a}`;
+  }
+  return /^https?:\/\/www.bilibili.com\/video\/.*/i.test(e) && (e = e.replace(/\?.*$/, "").replace("https://www.bilibili.com/video/", "https://player.bilibili.com/player.html?bvid=")), e.includes("drive.google.com") && (e = e.replace("/view", "/preview")), e;
+}
+const k = /* @__PURE__ */ I.create({
+  name: "video",
+  group: "block",
+  atom: !0,
+  draggable: !0,
+  //@ts-expect-error
+  addOptions() {
+    return {
+      divider: !1,
+      spacer: !1,
+      allowFullscreen: !0,
+      upload: void 0,
+      frameborder: !1,
+      resourceVideo: "both",
+      width: H["size-medium"],
+      HTMLAttributes: {
+        class: "iframe-wrapper"
+        // style: 'display: flex;justify-content: center;',
+      },
+      button: ({ editor: e, t }) => {
+        var o, n;
+        return {
+          componentProps: {
+            action: () => {
+            },
+            isActive: () => e.isActive("video") || !1,
+            /* If setVideo is not available(when Video Component is not imported), the button is disabled */
+            disabled: !((n = (o = e.can()).setVideo) != null && n.call(o, {})),
+            icon: "Video",
+            tooltip: t("editor.video.tooltip"),
+            videoProviders: ["."],
+            editor: e
+          }
+        };
+      }
+    };
+  },
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+        renderHTML: ({ src: e }) => ({
+          src: e ? K(e) : null
+        })
+      },
+      width: {
+        default: this.options.width,
+        renderHTML: ({ width: e }) => ({
+          width: N(e)
+        })
+      },
+      frameborder: {
+        default: this.options.frameborder ? 1 : 0,
+        parseHTML: () => this.options.frameborder ? 1 : 0
+      },
+      allowfullscreen: {
+        default: this.options.allowFullscreen,
+        parseHTML: () => this.options.allowFullscreen
+      },
+      align: {
+        default: "center",
+        // Default alignment
+        renderHTML: ({ align: e }) => ({
+          align: e
+        })
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-video] iframe"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: e }) {
+    const { width: t = "100%", align: o = "center" } = e ?? {}, n = {
+      ...e,
+      width: "100%",
+      height: "100%"
+    }, a = `position: relative;overflow: hidden;display: flex;flex: 1;max-width: ${t};`, c = `flex: 1;padding-bottom: ${9 / 16 * 100}%;`, h = ["div", { style: `display: flex; justify-content: ${o};` }, ["div", { style: a }, ["div", { style: c }], ["iframe", n]]];
+    return ["div", {
+      ...this.options.HTMLAttributes,
+      class: "iframe-wrapper",
+      "data-video": ""
+    }, h];
+  },
+  addCommands() {
+    return {
+      setVideo: (e) => ({ commands: t }) => t.insertContent({
+        type: this.name,
+        attrs: e
+      }),
+      updateVideo: (e) => ({ commands: t }) => t.updateAttributes(this.name, e)
+    };
+  }
+});
+export {
+  ne as R,
+  k as V,
+  J as c
+};

package/lib/Video-BwrHx6B1.cjs

@@ -0,0 +1 @@
+"use strict";const I=require("./clsx-CXbNJWDD.cjs"),k=require("./index-bVGIXhRg.cjs"),h=require("./useButtonProps-CFu0GHzW.cjs"),o=require("react/jsx-runtime"),u=require("react"),S=require("./toggle-oFwBZC4x.cjs"),b=require("./dialog-B-jOQ5i3.cjs"),d=require("./tabs-DBqNpGAq.cjs"),M=require("./button-BmTP96NR.cjs"),R=require("./input-s0JD5kf2.cjs");function D(e,t){let r;try{r=new URL(e)}catch{return!1}return!(t!=null&&t.length)||t.length===1&&t[0]==="."?!0:t.some(n=>{if(n.includes("*")){const l=n.replace(/\./g,String.raw`\.`).replace(/\*/g,".*");return new RegExp(`^${l}$`).test(r.hostname)}return r.hostname.includes(n)})}function $(){const{t:e}=k.useLocale(),t=h.useEditorInstance(),r=h.useButtonProps(T.name),{icon:n,tooltip:l}=(r==null?void 0:r.componentProps)??{},{editorDisabled:c}=h.useToggleActive(),[p,x]=u.useState(""),w=u.useRef(null),[y,f]=u.useState(""),[V,m]=u.useState(!1),v=h.useExtension(T.name),i=u.useMemo(()=>(v==null?void 0:v.options)??{},[v]);async function C(s){var L;const a=(L=s==null?void 0:s.target)==null?void 0:L.files;if(!t||t.isDestroyed||a.length===0)return;const g=a[0];let j="";i.upload?j=await i.upload(g):j=URL.createObjectURL(g),t.chain().focus().setVideo({src:j,width:"100%"}).run(),m(!1)}function A(s){s.preventDefault(),s.stopPropagation(),p&&(t.chain().focus().setVideo({src:p,width:"100%"}).run(),m(!1),x(""))}function q(s){var a;s.preventDefault(),(a=w.current)==null||a.click()}return o.jsxs(b.Dialog,{onOpenChange:m,open:V,children:[o.jsx(b.DialogTrigger,{asChild:!0,children:o.jsx(S.ActionButton,{disabled:c,icon:n,tooltip:l,action:()=>{c||m(!0)}})}),o.jsxs(b.DialogContent,{children:[o.jsx(b.DialogTitle,{children:e("editor.video.dialog.title")}),o.jsxs(d.Tabs,{activationMode:"manual",defaultValue:(i==null?void 0:i.resourceVideo)==="both"||(i==null?void 0:i.resourceVideo)==="upload"?"upload":"link",children:[o.jsxs(d.TabsList,{className:"richtext-grid richtext-w-full richtext-grid-cols-2",children:[((i==null?void 0:i.resourceVideo)==="both"||(i==null?void 0:i.resourceVideo)==="upload")&&o.jsx(d.TabsTrigger,{value:"upload",children:e("editor.video.dialog.tab.upload")}),((i==null?void 0:i.resourceVideo)==="both"||(i==null?void 0:i.resourceVideo)==="link")&&o.jsx(d.TabsTrigger,{value:"link",children:e("editor.video.dialog.link")})]}),o.jsxs(d.TabsContent,{value:"upload",children:[o.jsx("div",{className:"richtext-flex richtext-items-center richtext-gap-[10px]",children:o.jsx(M.Button,{className:"richtext-mt-1 richtext-w-full",onClick:q,size:"sm",children:e("editor.video.dialog.tab.upload")})}),o.jsx("input",{accept:"video/*",multiple:!0,onChange:C,ref:w,type:"file",style:{display:"none"}})]}),o.jsxs(d.TabsContent,{value:"link",children:[o.jsx("div",{children:o.jsxs("div",{className:"richtext-flex richtext-items-center richtext-gap-2",children:[o.jsx(R.Input,{autoFocus:!0,placeholder:e("editor.video.dialog.placeholder"),required:!0,type:"url",value:p,onBlur:s=>{const a=s.target.value,g=i.videoProviders||["."];a&&!D(a,g)?f("Invalid video URL"):f("")},onChange:s=>{x(s.target.value)}}),o.jsx(M.Button,{onClick:A,type:"button",children:e("editor.video.dialog.button.apply")})]})}),y&&o.jsx("div",{className:"richtext-my-[5px] richtext-text-red-500",children:y})]})]})]})]})}function H(e){e=e.replace("https://youtu.be/","https://www.youtube.com/watch?v=").replace("watch?v=","embed/");const t=e.match(/^https:\/\/www\.youtube\.com\/shorts\/([a-zA-Z0-9_-]+)/);t&&(e=`https://www.youtube.com/embed/${t[1]}`);const r=e.match(/^https:\/\/vimeo\.com\/(\d+)(?:\/([a-zA-Z0-9]+))?/);if(r){const l=r[1],c=r[2];c?e=`https://player.vimeo.com/video/${l}?h=${c}`:e=`https://player.vimeo.com/video/${l}`}return/^https?:\/\/www.bilibili.com\/video\/.*/i.test(e)&&(e=e.replace(/\?.*$/,"").replace("https://www.bilibili.com/video/","https://player.bilibili.com/player.html?bvid=")),e.includes("drive.google.com")&&(e=e.replace("/view","/preview")),e}const T=I.Node3.create({name:"video",group:"block",atom:!0,draggable:!0,addOptions(){return{divider:!1,spacer:!1,allowFullscreen:!0,upload:void 0,frameborder:!1,resourceVideo:"both",width:k.VIDEO_SIZE["size-medium"],HTMLAttributes:{class:"iframe-wrapper"},button:({editor:e,t})=>{var r,n;return{componentProps:{action:()=>{},isActive:()=>e.isActive("video")||!1,disabled:!((n=(r=e.can()).setVideo)!=null&&n.call(r,{})),icon:"Video",tooltip:t("editor.video.tooltip"),videoProviders:["."],editor:e}}}}},addAttributes(){return{src:{default:null,renderHTML:({src:e})=>({src:e?H(e):null})},width:{default:this.options.width,renderHTML:({width:e})=>({width:h.getCssUnitWithDefault(e)})},frameborder:{default:this.options.frameborder?1:0,parseHTML:()=>this.options.frameborder?1:0},allowfullscreen:{default:this.options.allowFullscreen,parseHTML:()=>this.options.allowFullscreen},align:{default:"center",renderHTML:({align:e})=>({align:e})}}},parseHTML(){return[{tag:"div[data-video] iframe"}]},renderHTML({HTMLAttributes:e}){const{width:t="100%",align:r="center"}=e??{},n={...e,width:"100%",height:"100%"},l=`position: relative;overflow: hidden;display: flex;flex: 1;max-width: ${t};`,c=`flex: 1;padding-bottom: ${9/16*100}%;`,f=["div",{style:`display: flex; justify-content: ${r};`},["div",{style:l},["div",{style:c}],["iframe",n]]];return["div",{...this.options.HTMLAttributes,class:"iframe-wrapper","data-video":""},f]},addCommands(){return{setVideo:e=>({commands:t})=>t.insertContent({type:this.name,attrs:e}),updateVideo:e=>({commands:t})=>t.updateAttributes(this.name,e)}}});exports.RichTextVideo=$;exports.Video=T;exports.checkIsVideoUrl=D;

package/lib/Video.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./clsx-CXbNJWDD.cjs");require("./index-bVGIXhRg.cjs");const e=require("./index-D9oM__YW.cjs");exports.RichTextVideo=e.RichTextVideo;exports.Video=e.Video;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./clsx-CXbNJWDD.cjs");require("./index-bVGIXhRg.cjs");require("./useButtonProps-CFu0GHzW.cjs");const e=require("./Video-BwrHx6B1.cjs");exports.RichTextVideo=e.RichTextVideo;exports.Video=e.Video;

package/lib/Video.js

@@ -1,7 +1,8 @@
-import "./clsx-CDyrfCnw.js";
+import "./clsx-m_C5j3RU.js";
 import "./index-4Q5IhypJ.js";
-import { a0 as t, _ as a } from "./index-lj3VWExo.js";
+import "./useButtonProps-BE10eHkG.js";
+import { R as m, V as p } from "./Video-Bpd8W8l6.js";
 export {
-  t as RichTextVideo,
-  a as Video
+  m as RichTextVideo,
+  p as Video
 };