Raphaël Bosi
c596a5e342
## Description Promotes the next-gen UI library (formerly `twenty-new-ui`) to the name **`twenty-ui`** (v0.1.0, publishable) and renames the old package to **`twenty-ui-deprecated`**. Rewrites ~1,730 `twenty-ui` imports → `twenty-ui-deprecated`, updates all configs/CI/Docker/deps, and migrates twenty-front's `Toggle` to the new package (first consumer) as a drop-in. ## Next steps - Wire the `ui/v*` publish dispatch (`cd-deploy-tag.yaml` + `.yarnrc.yml`), then tag `ui/v0.1.0` to publish. - Continue migrating components from `twenty-ui-deprecated` → `twenty-ui`.
113 lines
2.7 KiB
TypeScript
113 lines
2.7 KiB
TypeScript
import { ImageBubbleMenu } from '@/advanced-text-editor/components/ImageBubbleMenu';
|
|
import { LinkBubbleMenu } from '@/advanced-text-editor/components/LinkBubbleMenu';
|
|
import { TextBubbleMenu } from '@/advanced-text-editor/components/TextBubbleMenu';
|
|
import { FORM_FIELD_PLACEHOLDER_STYLES } from '@/object-record/record-field/ui/form-types/constants/FormFieldPlaceholderStyles';
|
|
import { styled } from '@linaria/react';
|
|
import { EditorContent, type Editor } from '@tiptap/react';
|
|
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
|
|
|
|
const StyledEditorContainer = styled.div<{
|
|
readonly?: boolean;
|
|
minHeight: number;
|
|
maxWidth: number;
|
|
}>`
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
.editor-content {
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
min-height: ${({ minHeight }) => minHeight}px;
|
|
width: 100%;
|
|
}
|
|
|
|
.tiptap {
|
|
border: none !important;
|
|
box-sizing: border-box;
|
|
color: ${({ readonly }) =>
|
|
readonly
|
|
? themeCssVariables.font.color.secondary
|
|
: themeCssVariables.font.color.primary};
|
|
font-family: ${themeCssVariables.font.family};
|
|
font-size: ${themeCssVariables.font.size.sm};
|
|
font-weight: ${themeCssVariables.font.weight.regular};
|
|
height: 100%;
|
|
padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]};
|
|
|
|
p.is-editor-empty:first-of-type::before {
|
|
${FORM_FIELD_PLACEHOLDER_STYLES}
|
|
content: attr(data-placeholder);
|
|
float: left;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
p {
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
.variable-tag {
|
|
background-color: ${themeCssVariables.color.blue3};
|
|
border-radius: ${themeCssVariables.border.radius.sm};
|
|
color: ${themeCssVariables.color.blue};
|
|
padding: ${themeCssVariables.spacing[1]};
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
li {
|
|
line-height: 1.5;
|
|
margin-bottom: ${themeCssVariables.spacing[2]};
|
|
}
|
|
}
|
|
|
|
.ProseMirror-focused {
|
|
outline: none;
|
|
}
|
|
|
|
.ProseMirror-hideselection * {
|
|
caret-color: transparent;
|
|
}
|
|
`;
|
|
|
|
type AdvancedTextEditorProps = {
|
|
readonly: boolean | undefined;
|
|
editor: Editor;
|
|
minHeight: number;
|
|
maxWidth: number;
|
|
};
|
|
|
|
export const AdvancedTextEditor = ({
|
|
readonly,
|
|
editor,
|
|
minHeight,
|
|
maxWidth,
|
|
}: AdvancedTextEditorProps) => {
|
|
return (
|
|
<StyledEditorContainer
|
|
readonly={readonly}
|
|
minHeight={minHeight}
|
|
maxWidth={maxWidth}
|
|
>
|
|
<EditorContent className="editor-content" editor={editor} />
|
|
<ImageBubbleMenu editor={editor} />
|
|
<TextBubbleMenu editor={editor} />
|
|
<LinkBubbleMenu editor={editor} />
|
|
</StyledEditorContainer>
|
|
);
|
|
};
|