import { useState, useRef } from 'react'; import { action } from '@storybook/addon-actions'; import { Button, Card, CardContent, CardFooter, Flex, Link, Text, TextArea } from '@pega/cosmos-react-core'; import { Editor } from '@pega/cosmos-react-rte'; import { createPegaCustomElement, mockUploadAttachment } from './Editor.mocks'; export default { title: 'RTE/Editor', component: Editor }; export const EditorDemo = (args) => { const editorRef = useRef(null); const onImageAdded = async (image, id) => { const src = URL.createObjectURL(image); try { await mockUploadAttachment(image, e => { editorRef.current?.updateAttachmentAttributes(id, (e.loaded * 100) / e.total); }); editorRef.current?.appendImage({ src, alt: image.name, attachmentId: 'sample-id' }, id); } catch (error) { if (error instanceof Error) { editorRef.current?.updateAttachmentAttributes(id, undefined, error.message); } } }; return (

Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida.

Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim nulla aliquet porttitor lacus.

Neque vitae ) } : undefined}/>); }; EditorDemo.args = { showAdditionalInfo: false, label: 'Form field label', labelHidden: false, info: 'Enter some value', status: undefined, required: false, disabled: false, readOnly: false }; EditorDemo.argTypes = { showAdditionalInfo: { control: { type: 'boolean' } }, label: { control: { type: 'text' } }, labelHidden: { control: { type: 'boolean' } }, info: { control: { type: 'text', label: 'Helper text' } }, status: { options: [undefined, 'success', 'warning', 'error', 'pending'], control: { type: 'select' } }, required: { control: { type: 'boolean' } }, disabled: { control: { type: 'boolean' } }, readOnly: { control: { type: 'boolean' } } }; export const EmptyEditorDemo = () => { const editorRef = useRef(null); const onImageAdded = (image, id) => { const src = URL.createObjectURL(image); editorRef.current?.appendImage({ src, alt: image.name }, id); }; return (); }; export const ReadonlyFormField = () => { return (

HTML: HyperText Markup Language

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.

HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> and many others.

An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by "<" and ">".  The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <title> tag can be written as <Title>, <TITLE>, or in any other way.

Found a problem with this page?

`}/>); }; export const InitOptionsEditorDemo = () => { const editorRef = useRef(null); const onImageAdded = (image, id) => { const src = URL.createObjectURL(image); editorRef.current?.appendImage({ src, alt: image.name }, id); }; return ( { editor.shortcuts.add('meta+b', '', () => { }); } }}/> ); }; export const CustomComponentDemo = () => { const editorRef = useRef(null); const [editor, setEditor] = useState({}); const onCustomAction = () => { editor.insertContent('Inserted from toolbar'); }; return ( { onCustomAction(); } } ]} onInit={initializedEditor => { setEditor(initializedEditor); }}/>); }; export const RichTextEditorWithLogs = () => { const editorRef = useRef(null); const [content, setContent] = useState(); const onImageAdded = (image, id) => { const src = URL.createObjectURL(image); editorRef.current?.appendImage({ src, alt: image.name }, id); }; const showContent = (type) => { if (type === 'html') setContent(editorRef.current?.getHtml()); else if (type === 'plain_text') setContent(editorRef.current?.getPlainText()); else if (type === 'rich_text') setContent(editorRef.current?.getRichText()); }; return ( {content} ); }; export const RichTextEditorHtmlParsingDemo = () => { const [html, setHtml] = useState('

Hello world!

'); const rteRef = useRef(null); const onImageAdded = (image, id) => { const src = URL.createObjectURL(image); rteRef.current?.appendImage({ src, alt: image.name }, id); }; return (