@martin-hillford/markdown-ts-react/lib/index.es.js

This is a React wrapper for the markdown-ts library. Please, see <https://github.com/martin-hillford/markdown-ts> for more information on the supported syntax.

import { markdownToHtml as se, getYouTubeId as le, renderYoutube as ie, getVimeoVideoId as ce, renderVimeo as ue, renderVideo as de } from "@martin-hillford/markdown-ts";
import { getVimeoUrl as We, getVimeoVideoId as qe, getYouTubeId as Je, getYouTubeUrl as Ge, isVimeoUrl as Be, markdownToHtml as Xe } from "@martin-hillford/markdown-ts";
import fe, { useEffect as me, useRef as ge } from "react";
import R, { css as pe } from "styled-components";
var T = { exports: {} }, _ = {};
/**
 * @license React
 * react-jsx-runtime.production.js
 *
 * 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 D;
function he() {
  if (D) return _;
  D = 1;
  var r = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
  function o(a, l, i) {
    var c = null;
    if (i !== void 0 && (c = "" + i), l.key !== void 0 && (c = "" + l.key), "key" in l) {
      i = {};
      for (var f in l)
        f !== "key" && (i[f] = l[f]);
    } else i = l;
    return l = i.ref, {
      $$typeof: r,
      type: a,
      key: c,
      ref: l !== void 0 ? l : null,
      props: i
    };
  }
  return _.Fragment = n, _.jsx = o, _.jsxs = o, _;
}
var E = {};
/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * 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 F;
function be() {
  return F || (F = 1, process.env.NODE_ENV !== "production" && function() {
    function r(e) {
      if (e == null) return null;
      if (typeof e == "function")
        return e.$$typeof === te ? null : e.displayName || e.name || null;
      if (typeof e == "string") return e;
      switch (e) {
        case y:
          return "Fragment";
        case B:
          return "Profiler";
        case G:
          return "StrictMode";
        case K:
          return "Suspense";
        case ee:
          return "SuspenseList";
        case ne:
          return "Activity";
      }
      if (typeof e == "object")
        switch (typeof e.tag == "number" && console.error(
          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
        ), e.$$typeof) {
          case J:
            return "Portal";
          case Z:
            return (e.displayName || "Context") + ".Provider";
          case X:
            return (e._context.displayName || "Context") + ".Consumer";
          case Q:
            var t = e.render;
            return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
          case re:
            return t = e.displayName || null, t !== null ? t : r(e.type) || "Memo";
          case I:
            t = e._payload, e = e._init;
            try {
              return r(e(t));
            } catch {
            }
        }
      return null;
    }
    function n(e) {
      return "" + e;
    }
    function o(e) {
      try {
        n(e);
        var t = !1;
      } catch {
        t = !0;
      }
      if (t) {
        t = console;
        var s = t.error, u = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
        return s.call(
          t,
          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
          u
        ), n(e);
      }
    }
    function a(e) {
      if (e === y) return "<>";
      if (typeof e == "object" && e !== null && e.$$typeof === I)
        return "<...>";
      try {
        var t = r(e);
        return t ? "<" + t + ">" : "<...>";
      } catch {
        return "<...>";
      }
    }
    function l() {
      var e = S.A;
      return e === null ? null : e.getOwner();
    }
    function i() {
      return Error("react-stack-top-frame");
    }
    function c(e) {
      if (Y.call(e, "key")) {
        var t = Object.getOwnPropertyDescriptor(e, "key").get;
        if (t && t.isReactWarning) return !1;
      }
      return e.key !== void 0;
    }
    function f(e, t) {
      function s() {
        M || (M = !0, console.error(
          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
          t
        ));
      }
      s.isReactWarning = !0, Object.defineProperty(e, "key", {
        get: s,
        configurable: !0
      });
    }
    function h() {
      var e = r(this.type);
      return V[e] || (V[e] = !0, console.error(
        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
      )), e = this.props.ref, e !== void 0 ? e : null;
    }
    function x(e, t, s, u, g, m, A, O) {
      return s = m.ref, e = {
        $$typeof: $,
        type: e,
        key: t,
        props: m,
        _owner: g
      }, (s !== void 0 ? s : null) !== null ? Object.defineProperty(e, "ref", {
        enumerable: !1,
        get: h
      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
        configurable: !1,
        enumerable: !1,
        writable: !0,
        value: 0
      }), Object.defineProperty(e, "_debugInfo", {
        configurable: !1,
        enumerable: !1,
        writable: !0,
        value: null
      }), Object.defineProperty(e, "_debugStack", {
        configurable: !1,
        enumerable: !1,
        writable: !0,
        value: A
      }), Object.defineProperty(e, "_debugTask", {
        configurable: !1,
        enumerable: !1,
        writable: !0,
        value: O
      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
    }
    function P(e, t, s, u, g, m, A, O) {
      var d = t.children;
      if (d !== void 0)
        if (u)
          if (oe(d)) {
            for (u = 0; u < d.length; u++)
              N(d[u]);
            Object.freeze && Object.freeze(d);
          } else
            console.error(
              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
            );
        else N(d);
      if (Y.call(t, "key")) {
        d = r(e);
        var b = Object.keys(t).filter(function(ae) {
          return ae !== "key";
        });
        u = 0 < b.length ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}", H[d + u] || (b = 0 < b.length ? "{" + b.join(": ..., ") + ": ...}" : "{}", console.error(
          `A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,
          u,
          d,
          b,
          d
        ), H[d + u] = !0);
      }
      if (d = null, s !== void 0 && (o(s), d = "" + s), c(t) && (o(t.key), d = "" + t.key), "key" in t) {
        s = {};
        for (var C in t)
          C !== "key" && (s[C] = t[C]);
      } else s = t;
      return d && f(
        s,
        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
      ), x(
        e,
        d,
        m,
        g,
        l(),
        s,
        A,
        O
      );
    }
    function N(e) {
      typeof e == "object" && e !== null && e.$$typeof === $ && e._store && (e._store.validated = 1);
    }
    var v = fe, $ = Symbol.for("react.transitional.element"), J = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), G = Symbol.for("react.strict_mode"), B = Symbol.for("react.profiler"), X = Symbol.for("react.consumer"), Z = Symbol.for("react.context"), Q = Symbol.for("react.forward_ref"), K = Symbol.for("react.suspense"), ee = Symbol.for("react.suspense_list"), re = Symbol.for("react.memo"), I = Symbol.for("react.lazy"), ne = Symbol.for("react.activity"), te = Symbol.for("react.client.reference"), S = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Y = Object.prototype.hasOwnProperty, oe = Array.isArray, j = console.createTask ? console.createTask : function() {
      return null;
    };
    v = {
      "react-stack-bottom-frame": function(e) {
        return e();
      }
    };
    var M, V = {}, L = v["react-stack-bottom-frame"].bind(
      v,
      i
    )(), z = j(a(i)), H = {};
    E.Fragment = y, E.jsx = function(e, t, s, u, g) {
      var m = 1e4 > S.recentlyCreatedOwnerStacks++;
      return P(
        e,
        t,
        s,
        !1,
        u,
        g,
        m ? Error("react-stack-top-frame") : L,
        m ? j(a(e)) : z
      );
    }, E.jsxs = function(e, t, s, u, g) {
      var m = 1e4 > S.recentlyCreatedOwnerStacks++;
      return P(
        e,
        t,
        s,
        !0,
        u,
        g,
        m ? Error("react-stack-top-frame") : L,
        m ? j(a(e)) : z
      );
    };
  }()), E;
}
var U;
function _e() {
  return U || (U = 1, process.env.NODE_ENV === "production" ? T.exports = he() : T.exports = be()), T.exports;
}
var p = _e();
const Me = (r) => {
  const { markdown: n, options: o } = r, a = se(n, o);
  return /* @__PURE__ */ p.jsx("div", { dangerouslySetInnerHTML: { __html: a } });
}, Ve = (r) => {
  const { url: n } = r;
  if (!n || n === "") return null;
  const o = le(n);
  if (!o) return null;
  const a = ie(o);
  return /* @__PURE__ */ p.jsx("div", { dangerouslySetInnerHTML: { __html: a } });
}, Le = (r) => {
  const { url: n } = r;
  if (!n || n === "") return null;
  const o = ce(n);
  if (!o) return null;
  const a = ue(o);
  return /* @__PURE__ */ p.jsx("div", { dangerouslySetInnerHTML: { __html: a } });
}, ze = (r) => {
  const { url: n } = r;
  if (!n || n === "") return null;
  const o = de(n);
  return /* @__PURE__ */ p.jsx("div", { dangerouslySetInnerHTML: { __html: o } });
}, Ee = (r) => {
  const { text: n, styled: o, enabled: a, inline: l = [] } = r, i = l.map((f) => f.parser), c = Re(n, a, i);
  return ve(l), me(() => () => {
    var f;
    (f = document.getElementById("highlighter-style")) == null || f.remove();
  }, []), /* @__PURE__ */ p.jsx(Te, { spellCheck: !1, $styled: o, dangerouslySetInnerHTML: { __html: c } });
}, ve = (r) => {
  if (r.length === 0) return;
  const n = r.map((a) => `span.${a.class} { color: ${a.color}; }`).join(`
`);
  let o = document.getElementById("highlighter-style");
  o || (o = document.createElement("style"), o.id = "highlighter-style", document.head.appendChild(o)), o.innerHTML = n;
}, Te = R.div`
    ${(r) => r.$styled};
    width: 100%;
    height: 100%;

    font-family: 'ecs-editor-font', ui-monospace, 'Courier New', Courier, monospace;

    span.header { color : #154879; }
    span.bold { color: #154879; }
    span.italic { color:#154879 }
    span.emphasis { color:#154879 }
    span.align { color:rgb(251, 0, 7)}
    span.link { color:rgb(140, 3, 18) }
    span.image { color:rgb(140, 3, 18) }
    span.notes { color:rgb(140, 3, 18) }
    span.notes { color:rgb(204, 119, 34) }
`, Re = (r, n, o) => r ? (n === !1 || (r = je(r), r = ye(r), r = xe(r), r = Ae(r), r = Oe(r), r = Ce(r), r = Se(r), r = we(r), o.forEach((a) => {
  r = W(r, a);
})), r) : "", W = (r, n) => {
  if (!r) return "";
  const o = n.parse(r);
  return o === null ? r : (o.head ?? "") + ke(o) + W(o.tail, n);
}, ke = (r) => (r.render ? r.render() : null) ?? r.content ?? "", we = (r) => k(r, [/\[\^.+?]:/gm, /\[\^.+?]:/gm], "notes"), xe = (r) => k(r, [/\[[^\n^\]?]+]\([^\n^)?]+\)/gm], "link"), ye = (r) => k(r, [/!\[[^\n^\]?]*]\([^\n^)?]+\)/gm], "image"), Se = (r) => k(r, [/^\[right]/gm, /^\[center]/gm, /^\[justify]/gm, /^\[clear]$/gm], "align"), je = (r) => w(r, [/^#{1,6} .+\n\n/gm, /^.+$\n-{3,}\n\n/gm, /^.+$\n={3,}\n\n/gm], "header", 0, 1), Ae = (r) => w(r, [/[^*]\*{3}[^*^<]+?\*{3}[^*]/gm, /[^_]_{3}[^_^<]+?_{3}[^_]/gm], "emphasis", 1, 1), Oe = (r) => w(r, [/[^*]\*{2}[^*^<]+?\*{2}[^*]/gm, /[^_]_{2}[^_^<]+?_{2}[^_]/gm], "bold", 1, 1), Ce = (r) => w(r, [/[^*]\*[^*^<]+?\*[^*]/gm, /[^_]_[^_^<]+?_[^_]/gm], "italic", 1, 1), k = (r, n, o) => (n.forEach((a) => {
  r = r.replaceAll(a, `<span class="${o}">$&</span>`);
}), r), w = (r, n, o, a, l) => (n.forEach((i) => {
  r = r.replaceAll(i, (c) => {
    const f = c.substring(0, a), h = c.substring(a, c.length - l), x = c.substring(c.length - l);
    return `${f}<span class="${o}">${h}</span>${x}`;
  });
}), r), He = (r) => {
  const { onCursorMove: n, highlighted: o, value: a, inline: l = [] } = r, i = ge(null), c = () => {
    if (!n || !i.current) return;
    const h = { start: i.current.selectionStart, end: i.current.selectionEnd };
    n(h);
  }, f = (h) => {
    r.onChange(h.target.value), c();
  };
  return /* @__PURE__ */ p.jsxs(Pe, { children: [
    /* @__PURE__ */ p.jsx(Ee, { inline: l, enabled: o, text: a + `
`, styled: q }),
    /* @__PURE__ */ p.jsx(
      Ne,
      {
        spellCheck: !1,
        value: a,
        onChange: f,
        onKeyUp: c,
        onClick: c,
        ref: i
      }
    )
  ] });
}, Pe = R.div`
    padding:0;
    width:100%;
    position: relative;
`, q = pe`
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
    border:0;
    margin:0;
    white-space: pre-wrap;
    min-height:25px;
`, Ne = R.textarea`
    ${q}
    &:focus { outline: none; }
    &:-internal-autofill-selected { outline: none; }
    font-family: 'ecs-editor-font', ui-monospace, 'Courier New', Courier, monospace;
    content: attr(data-replicated-value) " ";
    display: block;
    resize: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    background-color: transparent;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: transparent;
    caret-color: black;
`, De = R.div`
  font-family: "Roboto", "Helvetica Neue", ui-sans-serif, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 1px;
  color: #3d3d3d;

  img {
    max-width: calc(100vw - 220px);
  }

  ul, ol {
    padding-inline-start: 20px;
  }

  h1, h2, h3, h4, h5, h6 {
      color: #3d3d3d;
  }

  h1, h2, h3, h4 {
    font-weight: 100;
    text-align: center;
    word-break: break-word;
    hyphens: auto;
  }

  h1, h2 {
    font-size: 2.8rem;
    margin: 2.4rem 0;
    line-height: 4.2rem;
  }

  h3 {
    font-size: 2rem;
    margin: 1.8rem 0;
    line-height: 3rem;
  }

  h4 {
    font-size: 1.25rem;
    font-weight: bold;
    line-height:  1.875rem;
    letter-spacing: 1px;
  }

  h5 {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.5rem;
    letter-spacing: 1px;
  }


  code {
    padding:2px;
    background-color:lightgray;
    font-family: 'Courier New', Courier, monospace;
  }

  blockquote {
    border-left: 2px solid #3fab49;
    margin: 0 0 2rem;
    padding: 0 16px;
    clear:both;
  }

  a.reference, a.footnote {
    color : #0c497a;
    text-decoration: none;
  }

  table {
    border : 1px solid rgba(0, 0, 0, 0.1);
    border-spacing: 0;
    border-collapse: collapse;
    margin: 14px 0;

    tr.header td {
      background-color: #0c497a;
      color:white
    }

    td {
      padding: 2px 6px;
      border : 1px solid rgba(0, 0, 0, 0.1);
    }
  }

  img {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  div.footnote {
    font-size: 12px;
  }
`;
export {
  De as BaseStyle,
  Me as MarkDown,
  He as TextEditor,
  ze as Video,
  Le as Vimeo,
  Ve as YouTube,
  We as getVimeoUrl,
  qe as getVimeoVideoId,
  Je as getYouTubeId,
  Ge as getYouTubeUrl,
  Be as isVimeoUrl,
  Xe as markdownToHtml
};
//# sourceMappingURL=index.es.js.map