@lotte-innovate/ui-component-test 0.2.7 → 0.2.8
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +53 -0
- package/dist/lib/components/Editor/index.d.ts +1 -1
- package/dist/lib/components/Editor/index.js +1 -1
- package/dist/lib/components/Editor/index.mjs +1 -1
- package/dist/lib/constants.d.ts +0 -647
- package/dist/lib/constants.js +0 -895
- package/dist/lib/constants.mjs.map +1 -1
- package/dist/lib/index.d.ts +0 -1
- package/dist/lib/index.js +0 -1
- package/dist/lib/index.mjs +1 -1
- package/dist/lib/tsconfig.tsbuildinfo +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -8
- package/dist/lib/color/alpha.d.ts +0 -784
- package/dist/lib/color/alpha.js +0 -784
- package/dist/lib/color/constants.d.ts +0 -15
- package/dist/lib/color/constants.js +0 -265
- package/dist/lib/color/dark.d.ts +0 -392
- package/dist/lib/color/dark.js +0 -392
- package/dist/lib/color/krdsColors.d.ts +0 -309
- package/dist/lib/color/krdsColors.js +0 -309
- package/dist/lib/color/light.d.ts +0 -392
- package/dist/lib/color/light.js +0 -393
- package/dist/lib/theme/ThemeProvider.d.ts +0 -16
- package/dist/lib/theme/ThemeProvider.js +0 -29
- package/dist/lib/theme/ThemeProvider.mjs +0 -3
- package/dist/lib/theme/ThemeProvider.mjs.map +0 -1
- package/dist/lib/theme/index.d.ts +0 -2
- package/dist/lib/theme/index.js +0 -2
- package/dist/lib/types.d.ts +0 -90
- package/dist/lib/types.js +0 -1
package/README.md
ADDED
@@ -0,0 +1,53 @@
|
|
1
|
+
# LOTTE UI COMPONENT LIBRARY
|
2
|
+
|
3
|
+
<br />
|
4
|
+
|
5
|
+
## 목차
|
6
|
+
|
7
|
+
- [Introduction](#introduction)
|
8
|
+
- [Installation](#installation)
|
9
|
+
- [Usage](#usage)
|
10
|
+
- [License](#license)
|
11
|
+
|
12
|
+
## Introduction
|
13
|
+
|
14
|
+
L-UI 에디터를 포함한 단일 패키지입니다.
|
15
|
+
|
16
|
+
에디터 컴포넌트는 웹 애플리케이션에서 사용할 수 있는 WYSIWYG HTML 편집기입니다.
|
17
|
+
|
18
|
+
다양한 플러그인을 통해 기능을 확장할 수 있으며 상세 기능은 이 [링크](https://www.tiny.cloud/docs/tinymce/6/examples/)에서 확인 가능합니다.
|
19
|
+
|
20
|
+
## Installation
|
21
|
+
|
22
|
+
패키지를 설치하기 위해 아래 명령어를 사용합니다.
|
23
|
+
|
24
|
+
```bash
|
25
|
+
npm i @lotte-innovate/lui-editor
|
26
|
+
```
|
27
|
+
|
28
|
+
```bash
|
29
|
+
yarn add @lotte-innovate/lui-editor
|
30
|
+
```
|
31
|
+
|
32
|
+
## Usage
|
33
|
+
|
34
|
+
React 프로젝트에서 에디터를 사용하는 방법에 대한 예시입니다.
|
35
|
+
|
36
|
+
```javascript
|
37
|
+
import React from 'react';
|
38
|
+
import { Editor } from '@lotte-innovate/lui-editor';
|
39
|
+
|
40
|
+
const App = () => {
|
41
|
+
return (
|
42
|
+
<div>
|
43
|
+
<Editor />
|
44
|
+
</div>
|
45
|
+
);
|
46
|
+
};
|
47
|
+
|
48
|
+
export default App;
|
49
|
+
```
|
50
|
+
|
51
|
+
## License
|
52
|
+
|
53
|
+
@lotte-innovate
|
@@ -18,7 +18,7 @@ import 'tinymce/skins/ui/oxide/content';
|
|
18
18
|
export interface EditorProps extends VariantProps<typeof editorVariants> {
|
19
19
|
}
|
20
20
|
declare const editorVariants: (props?: ({
|
21
|
-
scaling?: "
|
21
|
+
scaling?: "100%" | "90%" | "95%" | "105%" | "110%" | null | undefined;
|
22
22
|
size?: "small" | "medium" | "large" | null | undefined;
|
23
23
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
24
24
|
export declare const Editor: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & EditorProps & IAllProps & React.RefAttributes<HTMLDivElement>>;
|
@@ -64,7 +64,7 @@ export var Editor = forwardRef(function (_a, ref) {
|
|
64
64
|
height: '100%',
|
65
65
|
plugins: 'link table code lists codesample',
|
66
66
|
menubar: false,
|
67
|
-
toolbar: 'blocks | bold italic forecolor strikethrough | hr blockquote | bullist numlist outdent indent | table image link | inlinecode codeformat
|
67
|
+
toolbar: 'blocks | bold italic forecolor strikethrough | hr blockquote | bullist numlist outdent indent | table image link | inlinecode codeformat markdown',
|
68
68
|
content_style: 'body { font-family:Noto Sans KR, sans-serif, Nunito Sans, Helvetica Neue, Helvetica }',
|
69
69
|
setup: function (editor) {
|
70
70
|
editor.ui.registry.addButton('inlinecode', {
|
@@ -1,3 +1,3 @@
|
|
1
1
|
"use client";
|
2
|
-
import{jsx as t}from"react/jsx-runtime";import{forwardRef as
|
2
|
+
import{jsx as t}from"react/jsx-runtime";import{forwardRef as i}from"react";import{Editor as e}from"@tinymce/tinymce-react";import{cva as n}from"class-variance-authority";import{scalingVariants as o}from"../../constants.mjs";import{cn as r}from"../../utils/utils.mjs";import{marked as s}from"marked";import"tinymce/tinymce";import"tinymce/themes/silver";import"tinymce/models/dom";import"tinymce/icons/default";import"tinymce/skins/ui/oxide/skin";import"tinymce/plugins/advlist";import"tinymce/plugins/code";import"tinymce/plugins/codesample";import"tinymce/plugins/link";import"tinymce/plugins/lists";import"tinymce/plugins/table";import"tinymce/plugins/image";import"tinymce/skins/content/default/content";import"tinymce/skins/ui/oxide/content";var m=function(){return m=Object.assign||function(t){for(var i,e=1,n=arguments.length;e<n;e++)for(var o in i=arguments[e])Object.prototype.hasOwnProperty.call(i,o)&&(t[o]=i[o]);return t},m.apply(this,arguments)},a=function(t,i){var e={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&i.indexOf(n)<0&&(e[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(t);o<n.length;o++)i.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(t,n[o])&&(e[n[o]]=t[n[o]])}return e},c=n("",{variants:{scaling:m({},o),size:{small:"w-[500px] h-[350px]",medium:"w-[550px] h-[400px]",large:"w-[600px] h-[450px]"}},defaultVariants:{scaling:"100%",size:"medium"}}),l=i((function(i,n){var o=i.className,l=i.size,p=i.scaling,u=a(i,["className","size","scaling"]);return t("div",{className:r(c({size:l,scaling:p}),o),ref:n,children:t(e,m({init:{base_url:"tinymce",width:"100%",height:"100%",plugins:"link table code lists codesample",menubar:!1,toolbar:"blocks | bold italic forecolor strikethrough | hr blockquote | bullist numlist outdent indent | table image link | inlinecode codeformat markdown",content_style:"body { font-family:Noto Sans KR, sans-serif, Nunito Sans, Helvetica Neue, Helvetica }",setup:function(t){t.ui.registry.addButton("inlinecode",{icon:"sourcecode",tooltip:"Inline code",onAction:function(){t.formatter.toggle("code")}}),t.on("init",(function(){t.formatter.register("code",{inline:"code",remove:"all"})})),t.ui.registry.addButton("markdown",{text:"Markdown",onAction:function(){var i=t.getContent({format:"text"}),e=s(i);t.setContent(e)}})}}},u))})}));l.displayName="Editor";export{l as Editor,l as default};
|
3
3
|
//# sourceMappingURL=index.mjs.map
|