ውቅር

EditorConfig እና RendererConfig ለእያንዳንዱ ብጁ ማድረጊያ የግቤት ነጥቦች ናቸው። ወይ ለEditor.create() ወይም ለRenderer.render() ያስተላልፉ። containerId ብቻ (እና ለRenderer data) ያስፈልጋል፣ ሌሎቹ ሁሉ አስተማማኝ ነባሪዎች አሏቸው።

EditorConfig

EditorConfig ብቸኛ ክርክር ሆኖ ወደ Editor.create() ያስተላልፉ። አስፈላጊው containerId ከEditor.create() ከመጠራቱ በፊት ነባር DOM ኤለሜንት ID ጋር መዛመድ አለበት።

አማራጭ	አይነት	አስፈላጊ	መግለጫ
containerId	string	አዎ	አርታኢውን የሚያስተናግደው DOM ኤለሜንት ID። Editor.create() ከመጠራቱ በፊት በDOM ውስጥ መኖር አለበት።
maxHeight	number	አይ	የአርታኢው ከፍተኛ ቁመት በፒክሰል። ምንም የቁመት ወሰን ለማይፈልጉ 0 (ነባሪ) ያዘጋጁ።
minHeight	number	አይ	የአርታኢው ዝቅተኛ ቁመት በፒክሰል። ነባሪ 300 ነው።
onChange	(data: EditorData) => void	አይ	ሰነዱ በተቀየረ ቁጥር የሚተኰሰ ኮልባክ። ሙሉ EditorData ቅጽሎ ይቀበላል።
onReady	() => void	አይ	አርታኢው ሙሉ በሙሉ ተጀምሮ የ API ጥሪዎችን ለመቀበል ዝግጁ ሲሆን የሚተኰሰ ኮልባክ።
placeholder	string	አይ	አርታኢው ባዶ በሚሆንበት ጊዜ የሚታይ ያስቀምጫ ጽሑፍ። ነባሪ "Start writing..." ነው።
initialData	EditorData	አይ	አርታኢው ሲጀምር ለመጫን አስቀድሞ የተሞላ EditorData።
initialView	'edit' \| 'preview' \| 'json'	አይ	የጀምሪያ እይታ ሁነታ። ከ: edit, preview, json አንዱ። ነባሪ "edit" ነው።
allowJsonViewEditing	boolean	አይ	እውነት ሲሆን፣ የJSON እይታ ሊስተካከል ይችላል እና ለውጦቹ ወደ ሰነዱ ይመለሳሉ። ነባሪ false ነው።
hasViewSwitcher	boolean	አይ	false ሲሆን፣ የአርትዕ፣ የቅድመ እይታ እና የJSON አዝራሮች ከድርጊት አሞሌው ይወጣሉ። ነባሪ true ነው።
hasDocumentActions	boolean	አይ	false ሲሆን፣ የመቅዳት፣ የማውረድ እና የማጽዳት አዝራሮች ከድርጊት አሞሌው ይወጣሉ። hasViewSwitcher ደግሞ false ከሆነ፣ የድርጊት አሞሌ አይሳልም። ነባሪ true ነው።
onClearRequest	() => Promise<boolean>	አይ	የማጽዳት አዝራር ሲጫን ይጠራል። ገጹ የሚጸዳው true ከመለሰ ብቻ ነው፤ ውድቅ ከሆነ ገጹ እንዳለ ይቀራል። ከሌለ፣ ማጽዳት ወዲያውኑ ይከናወናል።
margins	BlockMargins	አይ	ለእያንዳንዱ ብሎክ የሚተገበር ዓለምአቀፍ የላይ እና ታች ክፍተት (በፒክሰል)። በብሎክ ደረጃ ውቅሮች ቅድሚያ ያገኛሉ።
styles	EditorStyles	አይ	የአርታኢ ክሮም (ቶልባሮች፣ ዲያሎጎች፣ ቁጥጥሮች) ጥሩ ዝርዝር CSS ብጁ ማድረጊያ ለEditorStyles ነገር።
classNames	EditorClassNames	አይ	ለአርታኢ ክሮም ኤለሜንቶች የCSS ክፍል ስሞችን ለማያያዝ EditorClassNames ነገር።
imageUploader	UploadFunction	አይ	ምስል ፋይል የሚያስቀምጥ እና የህዝብ URL ሕብረቁምፊ የሚመልስ ያልሰሙ ተግባር።
audioUploader	UploadFunction	አይ	የኦዲዮ ፋይል የሚያስቀምጥ እና የህዝብ URL ሕብረቁምፊ የሚመልስ ያልሰሙ ተግባር።
videoUploader	UploadFunction	አይ	ቪዲዮ ፋይል የሚያስቀምጥ እና የህዝብ URL ሕብረቁምፊ የሚመልስ ያልሰሙ ተግባር።
fileUploader	UploadFunction	አይ	የፋይል ብሎክ አባሪዎችን ወደ ማከማቻዎ የሚጭን የመጫኛ ተግባር።
locale	string	አይ	አርታኢው የሚያርትዐው ነጠላ ቋንቋ። ባለ ብዙ ቋንቋ ብሎኮች ወደዚህ ቋንቋ ይተለተላሉ።
defaultLocale	string	አይ	ብሎክ ለተጠየቀው ቋንቋ ይዘት ከሌለው የሚያገለግል መጠባበቂያ ቋንቋ።
onLocaleFallback	(info: { blockId: string; locale: string }) => void	አይ	ብሎክ ወደ መጠባበቂያ ቋንቋ ሲወድቅ ይጠራል፣ አስተናጋጁ ምልክት እንዲያሳይ።
onInlineRewrite	(selection: string, action: InlineRewriteAction) => Promise<string \| null>	አይ	የተመረጠውን ጽሑፍ በ AI እንዲፃፍ የሚያደርግ ተግባር፤ ሲዘጋጅ የመሳሪያ አሞሌው የመፃፊያ አዝራር ያሳያል።
inlineRewriteLabels	Partial<Record<InlineRewriteAction, string>>	አይ	የመፃፊያ ምናሌ ተግባሮች ስያሜዎችን ይተካል፣ ለትርጉም።
inlineRewriteTooltip	string	አይ	በመስመር ውስጥ መሳሪያ አሞሌው ላይ ያለውን የመፃፊያ ዘንግ ፍንጭ ይተካል፣ ለትርጉም።
blockToolLabels	Partial<Record<BlockToolType, string>>	አይ	የብሎክ መሳሪያዎች ስያሜዎችን በመሳሪያ ሳጥኑና በስላሽ ምናሌ ውስጥ ይተካል፣ ለትርጉም።
blockToolbarLabels	Partial<Record<BlockToolbarLabel, string>>	አይ	የብሎክ የመሳሪያ አሞሌ ጽሑፎችን (ጨምር፣ አንቀሳቅስ፣ ሰርዝ እና ሌሎችም) እና በባዶ የብሎክ መስኮች የሚታዩ ፍንጮችን ይተካል፣ ለትርጉም።
controlLabels	Partial<Record<ControlLabel, string>>	አይ	የድርጊት አሞሌ አዝራሮችን ስሞች (አርትዕ፣ ቅድመ እይታ፣ JSON፣ ቅዳ፣ አውርድ፣ አጽዳ) ይተካል፤ እንደ ተደራሽ ስማቸው እና ጠቃሚ ምክራቸው ያገለግላሉ፣ ለትርጉም።
dialogLabels	Partial<Record<DialogLabel, string>>	አይ	የአገናኝ፣ የመረጃ ምክር እና የሁኔታ መገናኛዎች የሚያሳዩዋቸው ቃላት በስም ተደርድረው፦ ርዕሶች፣ የመስክ መለያዎች፣ ምሳሌ ጽሑፎች፣ የሁኔታ ቅጦች፣ ሰርዝ እና ተግብር። ከሌሉ በእንግሊዝኛ ይታያሉ።
resolveLink	(url: string) => Promise<Partial<EmbedData>>	አይ	የተለጠፈ አካትት ቅጽበታዊ ገጽታን ከአገልጋይዎ ይሞላል: ርዕስ፣ የDrive ፋይል፣ የgist ፋይሎች ወይም ቀጥታ እይታ የማይቻልበት ምክንያት። ስህተት የሚጥል ፍለጋ ካርዱን መሳሪያው እንዳልመለሰ ይስላል፣ ከጎኑ እንደገና ሞክር።
onEmbedAction	(action: EmbedAction, blockId: string) => void	አይ	አስተናጋጁ ብቻ ሊፈጽመው የሚችለው ከካርዱ ምክንያት ጎን ያለው መፍትሄ: connectGoogle አባሉን የGoogle መለያውን እንዲያገናኝ ይልካል፤ retry አርታዒው ራሱ ያስተናግዳል።
disabledEmbedProviders	readonly string[]	አይ	በሽቦ ቁልፍ (figma፣ miro፣ loom፣ google_drive፣ github_gist) የስራ ቦታው ያጠፋቸው የአካትት መሳሪያዎች፤ አገናኞቻቸው ምክንያቱን የሚናገሩ ካርዶች ሆነው ይሳላሉ።
pasteEmbeds	'live' \| 'offer' \| 'card'	አይ	የሚደገፍ አገናኝ መለጠፍ ምን እንደሚያደርግ: በቀጥታ ማሳየት (ነባሪ)፣ ማቅረብ፣ ወይም ካርድ ማሳየት።
embedLabels	Partial<Record<EmbedLabel, string>>	አይ	ለአካትት ብሎክ የምክንያት መስመሮች፣ ድርጊቶች እና የgist መለያዎች የተተረጎሙ ቃላት፣ በEmbedLabel ቁልፍ፤ ካልሆነ የእንግሊዝኛ ነባሪዎች።
resolveIssues	(urls: string[]) => Promise<Record<string, IssueSnapshot>>	አይ	የገጽ የጉዳይ አገናኞችን በ URL ቁልፍ በቅጽበታዊ ገጾቻቸው ይመልሳል። ከሌለ ቺፖች እና ካርዶች ሰነዱ ያከማቸውን ይይዛሉ እና ምንም አይታደስም።
onIssueAction	(action: IssueAction, tool: string) => void	አይ	ከጉዳይ ምክንያት ጎን ያለው ማስተካከያ አስተናጋጁ ብቻ የሚያደርገው: መሳሪያውን ማገናኘት፣ ይህም በአስተናጋጁ የውህደቶች ገጽ ላይ ያሳርፋል።
issueCards	'off' \| 'on'	አይ	በራሱ መስመር ላይ የተለጠፈ የጉዳይ አገናኝ ካርድ ይሁን፤ ከሌለ off። በዓረፍተ ነገር ውስጥ ያለ ቺፕ ሁልጊዜ ቺፕ ነው።
issueChip	{ assignee: boolean; status: boolean }	አይ	የአባሉ ሁለት የቺፕ መቀያየሪያዎች: የሁኔታ ፒል እና ያዢው። ከሌለ ሁለቱም በርተዋል።
issueLabels	Partial<Record<IssueLabel, string>>	አይ	ለጉዳይ ቺፑ፣ ካርዱ እና የተገናኙ ጉዳዮች ሰንጠረዥ የተተረጎሙ ቃላት፣ በIssueLabel ቁልፍ፤ ካልሆነ የእንግሊዝኛ ነባሪዎች።
jiraSites	readonly string[]	አይ	የሥራ ቦታው ግንኙነቶች የሚደርሱባቸው የ Jira ጣቢያዎች URLs፣ በራሱ ጎራ ላይ ያለ ጣቢያ አገናኝ እንደ ጉዳይ እንዲታወቅ።
allowedBlockTools	readonly BlockToolType[]	አይ	አርታዒው በብሎክ ምናሌ፣ በፍለጋው፣ በመቀየሪያ ምናሌ እና በመለጠፍ ላይ የሚያቀርባቸው የብሎክ ዓይነቶች። ከሌለ የተመዘገበ ብሎክ ሁሉ፤ ከዝርዝሩ ውጭ የተቀመጠ ብሎክ አሁንም ይታያል።
allowedInlineTools	readonly InlineToolType[]	አይ	የመስመር ውስጥ መሣሪያ አሞሌ የሚያቀርባቸው ምልክቶች። ከሌለ የተመዘገበ ምልክት ሁሉ።
theme	'auto' \| 'light' \| 'dark'	አይ	የቀለም ስርዓተ ጭነት። ከ: auto (ስርዓቱን ይከተላል)፣ light፣ dark። ነባሪ auto ነው።
themeOverrides	{ light?: ThemeTokens; dark?: ThemeTokens }	አይ	በሁነታ ደረጃ ቶከን ቅድሚያዎች። ሙሉ ጭነቱን ሳይተኩ ቀለሞችን ለማበጀት light እና/ወይም dark ቶከን ካርታዎችን ያቅርቡ።

TypeScript

import { Editor } from '@clepit/core';

const editor = Editor.create({
  containerId: 'editor',
  minHeight: 400,
  placeholder: 'Start writing...',
  theme: 'auto',
  onChange: data => console.log(data),
  onReady: () => console.log('Editor ready'),
  imageUploader: async file => {
    const form = new FormData();
    form.append('file', file);
    const res = await fetch('/api/upload', { body: form, method: 'POST' });
    const { url } = await res.json();
    return url;
  },
});

RendererConfig

RendererConfig ብቸኛ ክርክር ሆኖ ወደ Renderer.render() ያስተላልፉ። containerId እና data ሁለቱም ያስፈልጋሉ።

አማራጭ	አይነት	አስፈላጊ	መግለጫ
containerId	string	አዎ	የተሰናዳ ውጤቱ የሚወጋ DOM ኤለሜንት ID።
data	EditorData	አዎ	ሊሰናዳ የሚቀርበው EditorData ሰነድ። ያስፈልጋል።
margins	BlockMargins	አይ	ለእያንዳንዱ የሰናዳ ብሎክ የሚተገበር ዓለምአቀፍ የላይ እና ታች ክፍተት (በፒክሰል)።
styles	BlockStyles	አይ	ሊሰናዱ ለሚቀርበው ውጤት ለብሎክ-አይነት CSS ብጁ ማድረጊያ BlockStyles ካርታ።
classNames	BlockClassNames	አይ	ሊሰናዱ ለሚቀርበው ውጤት ለብሎክ-አይነት CSS ክፍል ስሞች BlockClassNames ካርታ።
editorClassNames	EditorClassNames	አይ	ይነሰናዱ የሚቀርቡ ኮምፖኔንቶችን (ለምሳሌ ለፓራግራፎች tooltip ክፍል ስሞች) ለሚያሳዩ ብሎኮች EditorClassNames።
configs	Partial<BlockTypeOutputConfigs>	አይ	ለብሎክ OutputConfig ነገሮች ከፊል ካርታ። እያንዳንዱ ግቤት የብሎክ ደረጃ ክፍተቶችን እና tooltip ክፍል ስሞችን ሊያዘጋጅ ይችላል።
theme	'auto' \| 'light' \| 'dark'	አይ	የቀለም ስርዓተ ጭነት። ከ: auto፣ light፣ dark አንዱ።
themeOverrides	{ light?: ThemeTokens; dark?: ThemeTokens }	አይ	ሊሰናዱ ለሚቀርቡ ውጤቶች ሁነታ ደረጃ ቶከን ቅድሚያዎች።

TypeScript

import { Renderer } from '@clepit/core';
import type { EditorData } from '@clepit/core';

const data: EditorData = await fetch('/api/content/123').then(r => r.json());

Renderer.render({
  containerId: 'output',
  data,
  theme: 'auto',
  margins: { bottom: 16, top: 16 },
});

በብሎክ ደረጃ ስታይል ማድረጊያ

EditorConfig እና RendererConfig ሁለቱም styles፣ classNames እና configs በብሎክ አይነት ቁልፍ ይቀበላሉ። እነዚህን ለዒላማ ቅድሚያዎች ይጠቀሙ፤ ሙሉ ቶከን ማጣቀሻ ለThemes ገጽ ይመልከቱ።

TypeScript

import { Editor, Renderer } from '@clepit/core';
import type { BlockStyles, BlockClassNames, EditorStyles } from '@clepit/core';

const editorStyles: EditorStyles = {
  blockToolbar: { container: { borderRadius: '8px' } },
};

const blockStyles: BlockStyles = {
  header: { h1: { fontFamily: 'Georgia, serif' } },
  paragraph: { lineHeight: '1.75' },
  table: { cell: { padding: '8px 12px' } },
};

const blockClassNames: BlockClassNames = {
  paragraph: 'prose-paragraph',
  header: { h1: 'prose-h1', h2: 'prose-h2' },
  alert: { info: 'alert-info', error: 'alert-error' },
};

Editor.create({
  containerId: 'editor',
  styles: editorStyles,
});

Renderer.render({
  containerId: 'output',
  data,
  styles: blockStyles,
  classNames: blockClassNames,
});