@haklex/rich-renderer-alert 0.0.1

package/LICENSE

@@ -0,0 +1,28 @@
+MIT License
+
+Copyright (c) 2024 Innei
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+Additional Terms and Conditions
+
+----------------
+
+Use of this software is governed by the terms of MIT and, in addition, by the terms and conditions described in the additional file (ADDITIONAL_TERMS.md). By using this software, you agree to abide by these additional terms and conditions.

package/README.md

@@ -0,0 +1,37 @@
+# @haklex/rich-renderer-alert
+
+GitHub 风格提示块渲染器。
+
+## 安装
+
+```bash
+pnpm add @haklex/rich-renderer-alert
+```
+
+## 导出
+
+```ts
+export { AlertRenderer } from './AlertRenderer'
+export { AlertEditRenderer } from './AlertEditRenderer'
+```
+
+## 类型
+
+Alert 类型：`'note' | 'tip' | 'important' | 'warning' | 'caution'`
+
+## 使用
+
+渲染器通过 `rendererConfig` 传入：
+
+```tsx
+import { AlertRenderer } from '@haklex/rich-renderer-alert'
+import type { RendererConfig } from '@haklex/rich-editor'
+
+const config: RendererConfig = {
+  Alert: AlertRenderer,
+}
+```
+
+## License
+
+MIT

package/dist/AlertEditRenderer.d.ts

@@ -0,0 +1,4 @@
+import { AlertRendererProps } from '@haklex/rich-editor';
+import { FC } from 'react';
+export declare const AlertEditRenderer: FC<AlertRendererProps>;
+//# sourceMappingURL=AlertEditRenderer.d.ts.map

package/dist/AlertEditRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertEditRenderer.d.ts","sourceRoot":"","sources":["../src/AlertEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAQ7D,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAU/B,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,kBAAkB,CAsCpD,CAAA"}

package/dist/AlertRenderer.d.ts

@@ -0,0 +1,10 @@
+import { AlertRendererProps } from '@haklex/rich-editor';
+import { LucideProps } from 'lucide-react';
+import { FC } from 'react';
+type AlertType = AlertRendererProps['type'];
+export declare const ALERT_ICONS: Record<AlertType, FC<LucideProps>>;
+export declare const ALERT_LABELS: Record<AlertType, string>;
+export declare const ALL_TYPES: AlertType[];
+export declare const AlertRenderer: FC<AlertRendererProps>;
+export default AlertRenderer;
+//# sourceMappingURL=AlertRenderer.d.ts.map

package/dist/AlertRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertRenderer.d.ts","sourceRoot":"","sources":["../src/AlertRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAC7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAQ/C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAI/B,KAAK,SAAS,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAA;AAE3C,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,SAAS,EAAE,EAAE,CAAC,WAAW,CAAC,CAM1D,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAMlD,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,SAAS,EAMhC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAUhD,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { AlertEditRenderer } from './AlertEditRenderer';
+export { AlertRenderer, default } from './AlertRenderer';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/index.mjs

@@ -0,0 +1,76 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@haklex/rich-editor-ui";
+import { OctagonAlert, TriangleAlert, MessageSquareWarning, Lightbulb, Info, ChevronDown } from "lucide-react";
+var alertHeader = "pq4lod1";
+var alertTrigger = "pq4lod2";
+var alertChevron = "pq4lod3";
+var alertIcon = "pq4lod4";
+var alertLabel = "pq4lod5";
+var alertMenuIcon = "pq4lod6";
+const ALERT_ICONS = {
+  note: Info,
+  tip: Lightbulb,
+  important: MessageSquareWarning,
+  warning: TriangleAlert,
+  caution: OctagonAlert
+};
+const ALERT_LABELS = {
+  note: "Note",
+  tip: "Tip",
+  important: "Important",
+  warning: "Warning",
+  caution: "Caution"
+};
+const ALL_TYPES = [
+  "note",
+  "tip",
+  "important",
+  "warning",
+  "caution"
+];
+const AlertRenderer = ({ type }) => {
+  const Icon = ALERT_ICONS[type];
+  const label = ALERT_LABELS[type];
+  return /* @__PURE__ */ jsxs("div", { className: alertHeader, "data-alert-type": type, children: [
+    /* @__PURE__ */ jsx(Icon, { className: alertIcon }),
+    /* @__PURE__ */ jsx("span", { className: alertLabel, children: label })
+  ] });
+};
+const AlertEditRenderer = ({
+  type,
+  editable,
+  onTypeChange
+}) => {
+  if (!editable || !onTypeChange) {
+    return /* @__PURE__ */ jsx(AlertRenderer, { type });
+  }
+  const Icon = ALERT_ICONS[type];
+  const label = ALERT_LABELS[type];
+  return /* @__PURE__ */ jsx("div", { className: alertHeader, "data-alert-type": type, children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs(DropdownMenuTrigger, { className: alertTrigger, children: [
+      /* @__PURE__ */ jsx(Icon, { className: alertIcon }),
+      /* @__PURE__ */ jsx("span", { className: alertLabel, children: label }),
+      /* @__PURE__ */ jsx(ChevronDown, { className: alertChevron })
+    ] }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { sideOffset: 6, align: "start", children: ALL_TYPES.map((t) => {
+      const ItemIcon = ALERT_ICONS[t];
+      return /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          "data-alert-type": t,
+          onClick: () => onTypeChange(t),
+          children: [
+            /* @__PURE__ */ jsx(ItemIcon, { className: alertMenuIcon }),
+            /* @__PURE__ */ jsx("span", { children: ALERT_LABELS[t] })
+          ]
+        },
+        t
+      );
+    }) })
+  ] }) });
+};
+export {
+  AlertEditRenderer,
+  AlertRenderer,
+  AlertRenderer as default
+};

package/dist/rich-renderer-alert.css

@@ -0,0 +1,173 @@
+.pq4lod1 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  font-size: 0.875rem;
+  line-height: 1;
+  margin-bottom: 6px;
+}
+.pq4lod2 {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  margin-inline: -6px;
+  border: none;
+  background: none;
+  font: inherit;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  font-size: 0.875rem;
+  line-height: 1;
+  transition: background-color 0.15s;
+}
+.pq4lod2:hover {
+  background-color: color-mix(in srgb, var(--rc-text) 5%, transparent);
+}
+.pq4lod3 {
+  opacity: 0;
+  transition: opacity 0.15s;
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+.pq4lod2:hover .pq4lod3 {
+  opacity: 0.6;
+}
+.pq4lod2[data-popup-open] .pq4lod3 {
+  opacity: 0.8;
+}
+.pq4lod4 {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--pq4lod0);
+}
+.pq4lod5 {
+  color: var(--pq4lod0);
+}
+.pq4lod6 {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+[data-alert-type='note'] {
+  --pq4lod0: var(--rc-alert-info);
+}
+[data-alert-type='tip'] {
+  --pq4lod0: var(--rc-alert-tip);
+}
+[data-alert-type='important'] {
+  --pq4lod0: var(--rc-alert-important);
+}
+[data-alert-type='warning'] {
+  --pq4lod0: var(--rc-alert-warning);
+}
+[data-alert-type='caution'] {
+  --pq4lod0: var(--rc-alert-caution);
+}
+[data-alert-type='note'] .pq4lod6 {
+  color: var(--rc-alert-info);
+}
+[data-alert-type='tip'] .pq4lod6 {
+  color: var(--rc-alert-tip);
+}
+[data-alert-type='important'] .pq4lod6 {
+  color: var(--rc-alert-important);
+}
+[data-alert-type='warning'] .pq4lod6 {
+  color: var(--rc-alert-warning);
+}
+[data-alert-type='caution'] .pq4lod6 {
+  color: var(--rc-alert-caution);
+}
+.rich-alert {
+  position: relative;
+  padding: var(--rc-space-md);
+  padding-left: calc(var(--rc-space-md) + 4px);
+  border-radius: 0 var(--rc-radius-sm) var(--rc-radius-sm) 0;
+  margin: var(--rc-space-md) 0;
+  background-color: var(--rc-bg-secondary);
+}
+.rich-alert::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  border-radius: var(--rc-radius-sm);
+}
+.rich-alert-note::before {
+  background-color: var(--rc-alert-info);
+}
+.rich-alert-tip::before {
+  background-color: var(--rc-alert-tip);
+}
+.rich-alert-important::before {
+  background-color: var(--rc-alert-important);
+}
+.rich-alert-warning::before {
+  background-color: var(--rc-alert-warning);
+}
+.rich-alert-caution::before {
+  background-color: var(--rc-alert-caution);
+}
+.rich-alert-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--rc-space-sm);
+  font-weight: 600;
+  margin-bottom: var(--rc-space-md);
+  font-size: var(--rc-font-size-small);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  line-height: 1;
+}
+.rich-alert-icon {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+.rich-alert-header-note {
+  color: var(--rc-alert-info);
+}
+.rich-alert-header-tip {
+  color: var(--rc-alert-tip);
+}
+.rich-alert-header-important {
+  color: var(--rc-alert-important);
+}
+.rich-alert-header-warning {
+  color: var(--rc-alert-warning);
+}
+.rich-alert-header-caution {
+  color: var(--rc-alert-caution);
+}
+.rich-alert-content {
+  min-height: 1em;
+}
+.rich-alert-content > .rich-paragraph:first-child {
+  margin-top: 0;
+}
+.rich-alert-content > .rich-paragraph:last-child {
+  margin-bottom: 0;
+}
+.rich-alert-content-editable {
+  outline: none;
+}
+.rich-alert-content .rich-paragraph {
+  margin: 0;
+  margin-bottom: 0.5em;
+}
+.rich-alert-content .rich-paragraph:last-child {
+  margin-bottom: 0;
+}

package/dist/styles.css.d.ts

@@ -0,0 +1,7 @@
+export declare const alertHeader: string;
+export declare const alertTrigger: string;
+export declare const alertChevron: string;
+export declare const alertIcon: string;
+export declare const alertLabel: string;
+export declare const alertMenuIcon: string;
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW,QAUtB,CAAA;AAEF,eAAO,MAAM,YAAY,QAsBvB,CAAA;AAEF,eAAO,MAAM,YAAY,QAMvB,CAAA;AAUF,eAAO,MAAM,SAAS,QAKpB,CAAA;AAEF,eAAO,MAAM,UAAU,QAErB,CAAA;AAEF,eAAO,MAAM,aAAa,QAIxB,CAAA"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@haklex/rich-renderer-alert",
+  "version": "0.0.1",
+  "description": "Alert renderer for haklex rich editor",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/rich-renderer-alert.css"
+  },
+  "main": "./dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "lucide-react": "^0.574.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vanilla-extract/css": "^1.18.0",
+    "@vanilla-extract/vite-plugin": "^5.1.4",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "typescript": "^5.9.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.0",
+    "@haklex/rich-editor": "0.0.1",
+    "@haklex/rich-style-token": "0.0.1",
+    "@haklex/rich-editor-ui": "0.0.1"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19",
+    "@haklex/rich-editor": "0.0.1",
+    "@haklex/rich-editor-ui": "0.0.1",
+    "@haklex/rich-style-token": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev:build": "vite build --watch"
+  },
+  "types": "./dist/index.d.ts"
+}