@kaitify/react 0.0.1-beta.1

package/lib/locale/en-us.d.ts

@@ -0,0 +1,31 @@
+declare const _default: {
+    本地上传: string;
+    远程地址: string;
+    附件名称: string;
+    附件地址: string;
+    附件: string;
+    插入: string;
+    更新: string;
+    默认颜色: string;
+    默认字体: string;
+    默认字号: string;
+    默认行高: string;
+    正文: string;
+    图片名称: string;
+    图片地址: string;
+    图片: string;
+    链接地址: string;
+    新窗口打开: string;
+    链接文字: string;
+    是否自动播放: string;
+    视频地址: string;
+    输入Latex数学公式: string;
+    一级标题: string;
+    二级标题: string;
+    三级标题: string;
+    四级标题: string;
+    五级标题: string;
+    六级标题: string;
+    自动识别: string;
+};
+export default _default;

package/lib/locale/index.d.ts

@@ -0,0 +1,2 @@
+export type LocaleType = 'zh-CN' | 'en-US' | 'ko-KR' | 'ja-JP';
+export declare const translate: (locale: LocaleType, key: string) => string;

package/lib/locale/ja-jp.d.ts

@@ -0,0 +1,31 @@
+declare const _default: {
+    本地上传: string;
+    远程地址: string;
+    附件名称: string;
+    附件地址: string;
+    附件: string;
+    插入: string;
+    更新: string;
+    默认颜色: string;
+    默认字体: string;
+    默认字号: string;
+    默认行高: string;
+    正文: string;
+    图片名称: string;
+    图片地址: string;
+    图片: string;
+    链接地址: string;
+    新窗口打开: string;
+    链接文字: string;
+    是否自动播放: string;
+    视频地址: string;
+    输入Latex数学公式: string;
+    一级标题: string;
+    二级标题: string;
+    三级标题: string;
+    四级标题: string;
+    五级标题: string;
+    六级标题: string;
+    自动识别: string;
+};
+export default _default;

package/lib/locale/ko-kr.d.ts

@@ -0,0 +1,31 @@
+declare const _default: {
+    本地上传: string;
+    远程地址: string;
+    附件名称: string;
+    附件地址: string;
+    附件: string;
+    插入: string;
+    更新: string;
+    默认颜色: string;
+    默认字体: string;
+    默认字号: string;
+    默认行高: string;
+    正文: string;
+    图片名称: string;
+    图片地址: string;
+    图片: string;
+    链接地址: string;
+    新窗口打开: string;
+    链接文字: string;
+    是否自动播放: string;
+    视频地址: string;
+    输入Latex数学公式: string;
+    一级标题: string;
+    二级标题: string;
+    三级标题: string;
+    四级标题: string;
+    五级标题: string;
+    六级标题: string;
+    自动识别: string;
+};
+export default _default;

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@kaitify/react",
+  "version": "0.0.1-beta.1",
+  "private": false,
+  "type": "module",
+  "author": "so-better",
+  "main": "lib/kaitify-react.umd.js",
+  "module": "lib/kaitify-react.es.js",
+  "types": "lib/index.d.ts",
+  "license": "MIT",
+  "description": "基于@kaitify/core开发的react富文本编辑器核心库",
+  "scripts": {
+    "dev": "vite",
+    "lib": "tsc && vite build",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs"
+  },
+  "dependencies": {
+    "@iconify/react": "^6.0.2",
+    "@kaitify/core": "0.0.2-beta.8",
+    "@popperjs/core": "^2.11.8",
+    "classnames": "^2.5.1",
+    "dap-util": "^1.6.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-transition-group": "^4.4.5"
+  },
+  "devDependencies": {
+    "@types/node": "^24.6.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-transition-group": "^4.4.5",
+    "@vitejs/plugin-react": "^5.0.4",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
+    "terser": "^5.16.9",
+    "typescript": "~5.9.3",
+    "vite": "^5.4.10",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vite-plugin-dts": "^4.3.0",
+    "vitepress": "^1.5.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/so-better/kaitify-react"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  }
+}

package/src/core/button/button.tsx

@@ -0,0 +1,29 @@
+import classNames from 'classnames'
+import { useEditor } from '@/hooks'
+import { ButtonPropsType } from './props'
+import styles from './style.module.less'
+
+/**
+ * 菜单按钮组件
+ */
+export default function Button(props: ButtonPropsType) {
+  const { dark } = useEditor()
+
+  return (
+    <button
+      className={classNames(styles['kaitify-button'], props.className, {
+        [styles['kaitify-button-active']]: props.active,
+        [styles['kaitify-button-block']]: props.block,
+        [styles['kaitify-button-large']]: props.large,
+        [styles['kaitify-dark']]: dark
+      })}
+      style={props.style}
+      disabled={props.disabled}
+      type='button'
+      role='button'
+      onClick={props.onClick}
+    >
+      {props.children}
+    </button>
+  )
+}

package/src/core/button/index.ts

@@ -0,0 +1,3 @@
+import Button from './button'
+export * from './props'
+export { Button }

package/src/core/button/props.ts

@@ -0,0 +1,39 @@
+import { CSSProperties, ReactNode } from 'react'
+
+/**
+ * 按钮组件的属性类型
+ */
+export type ButtonPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 是否激活
+   */
+  active?: boolean
+  /**
+   * 是否块级展示
+   */
+  block?: boolean
+  /**
+   * 是否更大的按钮
+   */
+  large?: boolean
+  /**
+   * 默认插槽
+   */
+  children?: ReactNode
+  /**
+   * 样式
+   */
+  style?: CSSProperties
+  /**
+   * 样式类
+   */
+  className?: string
+  /**
+   * 点击
+   */
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+}

package/src/core/button/style.module.less

@@ -0,0 +1,57 @@
+.kaitify-button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 @padding;
+  height: 28px;
+  background: @background-color;
+  color: @font-color;
+  font-size: @font-size;
+  font-family: @font-family;
+  border: none;
+  border-radius: @border-radius;
+  transition: background 300ms, color 300ms;
+
+  &,
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    outline: none;
+  }
+
+  &.kaitify-dark {
+    background: @background-color-dark;
+    color: @font-color-dark;
+  }
+
+  &:not(:disabled):hover {
+    cursor: pointer;
+    background: @lightest-theme;
+    color: @theme;
+  }
+
+  &:not(:disabled):active {
+    background: @lighter-theme;
+    color: @theme;
+  }
+
+  &:not(:disabled).kaitify-button-active {
+    background: @lighter-theme;
+    color: @theme;
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  &.kaitify-button-block {
+    display: flex;
+    width: 100%;
+  }
+
+  &.kaitify-button-large {
+    height: 32px;
+  }
+}

package/src/core/checkbox/checkbox.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import classNames from 'classnames'
+import { useEditor } from '@/hooks'
+import { CheckboxPropsType } from './props'
+import styles from './style.module.less'
+
+/**
+ * 复选框
+ */
+export default function Checkbox(props: CheckboxPropsType) {
+  const { dark } = useEditor()
+
+  //复选框变更
+  const onChange = (e: React.ChangeEvent) => {
+    if (props.disabled) {
+      return
+    }
+    const checked = (e.target as HTMLInputElement).checked
+    props.onChange?.(checked)
+  }
+
+  return (
+    <label
+      className={classNames(styles['kaitify-checkbox'], {
+        [styles['kaitify-disabled']]: props.disabled,
+        [styles['kaitify-dark']]: dark
+      })}
+    >
+      <span
+        className={classNames(styles['kaitify-checkbox-el'], {
+          [styles['kaitify-checkbox-active']]: props.checked
+        })}
+      >
+        <input type='checkbox' onChange={onChange} disabled={props.disabled} />
+      </span>
+      <span className={styles['kaitify-checkbox-label']}>{props.label}</span>
+    </label>
+  )
+}

package/src/core/checkbox/index.ts

@@ -0,0 +1,3 @@
+import Checkbox from './checkbox'
+export type * from './props'
+export { Checkbox }

package/src/core/checkbox/props.ts

@@ -0,0 +1,21 @@
+/**
+ * 复选框组件属性类型
+ */
+export type CheckboxPropsType = {
+  /**
+   * 是否选中
+   */
+  checked?: boolean
+  /**
+   * 复选框选择事件
+   */
+  onChange?: (checked: boolean) => void
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * label文字
+   */
+  label?: string
+}

package/src/core/checkbox/style.module.less

@@ -0,0 +1,99 @@
+.kaitify-checkbox {
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: @font-size;
+  color: @font-color;
+  line-height: 1;
+  opacity: 0.8;
+  transition: opacity 300ms;
+
+  &,
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    outline: none;
+  }
+
+  .kaitify-checkbox-el {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 15px;
+    height: 15px;
+    position: relative;
+    border: 1px solid @border-color;
+    border-radius: @border-radius;
+    user-select: none;
+    touch-action: none;
+    transition: all 300ms;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 4px;
+      top: 1px;
+      width: 0px;
+      height: 0px;
+      margin-top: 5px;
+      border: solid @theme;
+      border-width: 0;
+      transform: rotate(45deg);
+      border-color: #fff;
+      user-select: none;
+      touch-action: none;
+      transition: width 100ms ease-in-out, height 200ms ease-in-out, margin-top 200ms ease-in-out;
+    }
+
+    &.kaitify-checkbox-active {
+      background: @theme;
+      border-color: @theme;
+
+      &::before {
+        margin-top: 0;
+        width: 5px;
+        height: 10px;
+        border-width: 0 2px 2px 0;
+      }
+    }
+
+    input[type='checkbox'] {
+      opacity: 0;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      cursor: pointer;
+    }
+  }
+
+  .kaitify-checkbox-label {
+    margin-left: @small-margin;
+  }
+
+  &:not(.kaitify-disabled):hover {
+    cursor: pointer;
+    opacity: 1;
+  }
+
+  &.kaitify-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    .kaitify-checkbox-el > input[type='checkbox'] {
+      cursor: not-allowed;
+    }
+  }
+
+  &.kaitify-dark {
+    color: @font-color-dark;
+
+    .kaitify-checkbox-el {
+      border-color: @border-color-dark;
+    }
+  }
+}

package/src/core/divider/divider.tsx

@@ -0,0 +1,17 @@
+import classNames from 'classnames'
+import { useEditor } from '@/hooks'
+import styles from './style.module.less'
+
+/**
+ * 分隔线
+ */
+export default function Divider() {
+  const { dark } = useEditor()
+  return (
+    <div
+      className={classNames(styles['kaitify-divider'], {
+        [styles['kaitify-dark']]: dark
+      })}
+    />
+  )
+}

package/src/core/divider/index.ts

@@ -0,0 +1,2 @@
+import Divider from './divider'
+export { Divider }

package/src/core/divider/style.module.less

@@ -0,0 +1,12 @@
+.kaitify-divider {
+  display: inline-block;
+  width: 1px;
+  height: 18px;
+  background: @border-color;
+  vertical-align: middle;
+  margin: 0 @small-margin;
+
+  &.kaitify-dark {
+    background: @border-color-dark;
+  }
+}

package/src/core/icon/icon.tsx

@@ -0,0 +1,14 @@
+import classNames from 'classnames'
+import { Icon as IconifyIcon } from '@iconify/react'
+import { IconPropsType } from './props'
+import styles from './style.module.less'
+
+/**
+ * 图标组件
+ */
+export default function Icon(props: IconPropsType) {
+  if (props.name.startsWith('kaitify-icon-')) {
+    return <i className={classNames(styles['kaitify-icon'], props.name, props.className)} style={{ fontSize: props.size, ...props.style }} />
+  }
+  return <IconifyIcon mode='svg' icon={props.name} className={classNames(styles['kaitify-icon'], props.className)} style={{ fontSize: props.size, ...props.style }} />
+}

package/src/core/icon/index.ts

@@ -0,0 +1,3 @@
+import Icon from './icon'
+export * from './props'
+export { Icon }

package/src/core/icon/props.ts

@@ -0,0 +1,23 @@
+import { CSSProperties } from 'react'
+
+/**
+ * 图标组件的属性类型
+ */
+export type IconPropsType = {
+  /**
+   * iconify的图标name
+   */
+  name: string
+  /**
+   * 图标大小，如果是数值默认单位为px
+   */
+  size?: string | number
+  /**
+   * 样式
+   */
+  style?: CSSProperties
+  /**
+   * 样式类
+   */
+  className?: string
+}

package/src/core/icon/style.module.less

@@ -0,0 +1,19 @@
+@font-face {
+	font-family: 'kaitify-icon';
+	src: url('../../iconfont/iconfont.woff') format('woff'), url('../../iconfont/iconfont.ttf?t=2024051301') format('truetype');
+}
+
+.kaitify-icon {
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	color: inherit;
+	font-family: 'kaitify-icon' !important;
+	font-size: inherit;
+	font-style: normal;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	line-height: 1;
+	vertical-align: middle;
+	box-sizing: border-box;
+}

package/src/core/popover/index.ts

@@ -0,0 +1,3 @@
+import Popover from './popover'
+export * from './props'
+export { Popover }