Your IP : 216.73.216.86
import { defaultTheme } from '../../../src/themes/default-theme';
function isHtml(content)
{
return content.match(/^[\t\n]*<[a-z]/);
}
export function paragraph(content = '<br>')
{
return `<p class="${defaultTheme.paragraph}">${isHtml(content) ? content : text(content)}</p>`;
}
export function bold(content = '')
{
return `<strong class="${defaultTheme.text.bold}" data-lexical-text="true">${content}</strong>`;
}
export function italic(content = '')
{
return `<em class="${defaultTheme.text.italic}" data-lexical-text="true">${content}</em>`;
}
export function underline(content = '')
{
return `<span class="${defaultTheme.text.underline}" data-lexical-text="true">${content}</span>`;
}
export function strike(content = '')
{
return `<span class="${defaultTheme.text.strikethrough}" data-lexical-text="true">${content}</span>`;
}
export function underlineStrike(content = '')
{
return `<span class="${defaultTheme.text.underlineStrikethrough}" data-lexical-text="true">${content}</span>`;
}
export function boldItalic(content = '')
{
return `<strong class="${defaultTheme.text.bold} ${defaultTheme.text.italic}" data-lexical-text="true">${content}</strong>`;
}
export function text(content = '')
{
return `<span data-lexical-text="true">${content}</span>`;
}
export function link(content = '', url = 'https://example.com')
{
return `<a href="${url}" target="_blank" class="${defaultTheme.link}">${
isHtml(content) ? content : text(content)}</a>`
;
}
export function autolink(url)
{
return link(url, url);
}
export function code(content = '')
{
return `<code spellcheck="false" class="${defaultTheme.code}">${content}</code>`;
}
export function codeToken(content = '', keyword = 'keyword')
{
return `<span class="ui-typography-token-${keyword}" data-lexical-text="true">${content}</span>`;
}
export function parentheses(content = '')
{
return codeToken(content, 'parentheses');
}
export function keyword(content = '')
{
return codeToken(content, 'keyword');
}
export function brace(content = '')
{
return codeToken(content, 'brace');
}
export function comment(content = '')
{
return codeToken(content, 'comment');
}
export function semicolon(content = '')
{
return codeToken(';', 'semicolon');
}
export function word(content = '')
{
return codeToken(content, 'word');
}
export function string(content = '')
{
return codeToken(content, 'string');
}
export function quote(content = '')
{
return `<blockquote spellcheck="false" class="${defaultTheme.quote}">${
isHtml(content) ? content : text(content)
}</blockquote>`;
}
export function mention(content = '')
{
return `<span class="${defaultTheme.mention}">${isHtml(content) ? content : text(content)}</span>`;
}
export function hashtag(content = '')
{
return `<span class="${defaultTheme.hashtag}" data-lexical-text="true">${content}</span>`;
}
const smileys = {
':)': 'bx_smile_smile.png',
':-)': 'bx_smile_smile.png',
';)': 'bx_smile_wink.png',
';-)': 'bx_smile_wink.png',
':D': 'bx_smile_biggrin.png',
':-D': 'bx_smile_biggrin.png',
'8-)': 'bx_smile_cool.png',
':{}': 'bx_smile_kiss.png',
};
export function emoji(emojiCode = ':)')
{
return `<img src="/upload/main/smiles/2/${smileys[emojiCode]}" class="${defaultTheme.smiley}" draggable="false" data-lexical-decorator="true" contenteditable="true">`;
}
export function br(count = 1)
{
return '<br>'.repeat(count);
}
export function spoiler(content = '', open = true, title = 'Spoiler')
{
const openAttr = open ? ' open=""' : '';
const contentHtml = content === '' ? paragraph() : content;
return `
<details class="${defaultTheme.spoiler.container}"${openAttr}>
<summary class="${defaultTheme.spoiler.title}">
<span data-lexical-text="true">${title}</span>
</summary>
<div class="${defaultTheme.spoiler.content}">${contentHtml}</div>
</details>
`;
}
export function table(content = '')
{
return `<table class="${defaultTheme.table}">${content}</table>`;
}
export function tr(content = '')
{
return `<tr class="${defaultTheme.tableRow}">${content}</tr>`;
}
export function td(content = paragraph())
{
return `<td class="${defaultTheme.tableCell}">${content}</td>`;
}
export function th(content = paragraph())
{
return `<th class="${defaultTheme.tableCell} ${defaultTheme.tableCellHeader}">${content}</th>`;
}
export function image(
selected = false,
url = 'https://i.pinimg.com/564x/3d/d8/3f/3dd83fc6cfce54d3ad2bcc992cd5ed18.jpg',
)
{
return `
<span class="${defaultTheme.image.container}${selected ? ' --selected' : ''}" data-lexical-decorator="true" contenteditable="false">
<div class="ui-text-editor-image-component${selected ? ' --selected --draggable' : ''}">
<div class="ui-text-editor-image-container" draggable="${selected ? 'true' : 'false'}">
<img draggable="false" src="https://i.pinimg.com/564x/3d/d8/3f/3dd83fc6cfce54d3ad2bcc992cd5ed18.jpg" class="${defaultTheme.image.img}"></div>
<div class="ui-text-editor-figure-resizer${selected ? ' --shown' : ''}">
<div class="ui-text-editor-figure-resizer-handle --north-east" data-direction="9"></div>
<div class="ui-text-editor-figure-resizer-handle --south-east" data-direction="3"></div>
<div class="ui-text-editor-figure-resizer-handle --south-west" data-direction="6"></div>
<div class="ui-text-editor-figure-resizer-handle --north-west" data-direction="12"></div>
</div>
</div>
</span>
`;
}
export function video(
url = 'https://video.1c-bitrix.ru/bitrix24/themes/video-rain/rain3.mp4',
selected = false,
)
{
return `
<span class="${defaultTheme.video.container}${selected ? ' --selected' : ''}" data-lexical-decorator="true" contenteditable="false">
<div class="ui-text-editor-video-component${selected ? ' --selected' : ''}">
<div class="ui-text-editor-video-object-container">
<video controls="true" preload="metadata" playsinline="true" src="${url}" class="${defaultTheme.video.object}" width="560"></video>
</div>
<div class="ui-text-editor-figure-resizer${selected ? ' --shown' : ''}">
<div class="ui-text-editor-figure-resizer-handle --north-east" data-direction="9"></div>
<div class="ui-text-editor-figure-resizer-handle --south-east" data-direction="3"></div>
<div class="ui-text-editor-figure-resizer-handle --south-west" data-direction="6"></div>
<div class="ui-text-editor-figure-resizer-handle --north-west" data-direction="12"></div>
<div class="ui-text-editor-figure-resizer-handle --north" data-direction="8"></div>
<div class="ui-text-editor-figure-resizer-handle --east" data-direction="1"></div>
<div class="ui-text-editor-figure-resizer-handle --south" data-direction="2"></div>
<div class="ui-text-editor-figure-resizer-handle --west" data-direction="4"></div><
/div>
</div>
</span>
`;
}
export function ul(content)
{
return `<ul class="${defaultTheme.list.ul}">${content}</ul>`;
}
export function ol(content)
{
return `<ol class="${defaultTheme.list.olDepth[0]}">${content}</ol>`;
}
export function li(content, value)
{
return `<li value="${value}" class="${defaultTheme.list.listitem}">${
isHtml(content) ? content : text(content)
}</li>`;
}