+ {children}
+
+ )
+}
+
+const Methods: React.FC<{ mdxRef: React.ForwardedRef
+
+ focusEmitter={focusEmitter}
+ getContent={(node) => node.children}
+ getUpdatedMdastNode={(mdastNode, children: any) => ({ ...mdastNode, children })}
+ />
+
+ )
+ }
+}
diff --git a/src/directive-editors/GenericDirectiveEditor.tsx b/src/directive-editors/GenericDirectiveEditor.tsx
new file mode 100644
index 00000000..b4e8770c
--- /dev/null
+++ b/src/directive-editors/GenericDirectiveEditor.tsx
@@ -0,0 +1,55 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import { PhrasingContent } from 'mdast'
+import React from 'react'
+import { NestedLexicalEditor, useMdastNodeUpdater } from '../plugins/core/NestedLexicalEditor'
+import { PropertyPopover } from '../plugins/core/PropertyPopover'
+import styles from '../styles/ui.module.css'
+import { DirectiveEditorProps } from '../plugins/directives'
+import { Directive } from 'mdast-util-directive'
+
+/**
+ * A generic editor that can be used as an universal UI for any directive.
+ * Allows editing of the directive content and properties.
+ * Use this editor for the {@link DirectiveDescriptor} Editor option.
+ */
+export const GenericDirectiveEditor: React.FC
+ {descriptor.attributes.length == 0 && descriptor.hasChildren && mdastNode.type !== 'textDirective' ? (
+ {mdastNode.name}
+ ) : null}
+
+ {descriptor.attributes.length > 0 ? (
+
+ block={mdastNode.type === 'containerDirective'}
+ getContent={(node) => node.children as PhrasingContent[]}
+ getUpdatedMdastNode={(mdastNode, children: any) => {
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+ return { ...mdastNode, children }
+ }}
+ />
+ ) : (
+ {mdastNode.name}
+ )}
+
+ )
+}
diff --git a/src/examples/.eslintrc b/src/examples/.eslintrc
new file mode 100644
index 00000000..d5ba8f9d
--- /dev/null
+++ b/src/examples/.eslintrc
@@ -0,0 +1,5 @@
+{
+ "rules": {
+ "no-console": "off"
+ }
+}
diff --git a/src/examples/_boilerplate.tsx b/src/examples/_boilerplate.tsx
new file mode 100644
index 00000000..52affbd0
--- /dev/null
+++ b/src/examples/_boilerplate.tsx
@@ -0,0 +1,145 @@
+import React from 'react'
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { LeafDirective } from 'mdast-util-directive'
+import {
+ diffSourcePlugin,
+ markdownShortcutPlugin,
+ AdmonitionDirectiveDescriptor,
+ DirectiveDescriptor,
+ directivesPlugin,
+ frontmatterPlugin,
+ headingsPlugin,
+ imagePlugin,
+ linkDialogPlugin,
+ linkPlugin,
+ listsPlugin,
+ quotePlugin,
+ tablePlugin,
+ thematicBreakPlugin,
+ toolbarPlugin,
+ SandpackConfig,
+ codeBlockPlugin,
+ codeMirrorPlugin,
+ sandpackPlugin,
+ KitchenSinkToolbar
+} from '../'
+import dataCode from './assets/dataCode.ts?raw'
+
+const defaultSnippetContent = `
+export default function App() {
+ return (
+
+
+ );
+}
+`.trim()
+
+export const virtuosoSampleSandpackConfig: SandpackConfig = {
+ defaultPreset: 'react',
+ presets: [
+ {
+ label: 'React',
+ name: 'react',
+ meta: 'live react',
+ sandpackTemplate: 'react',
+ sandpackTheme: 'light',
+ snippetFileName: '/App.js',
+ snippetLanguage: 'jsx',
+ initialSnippetContent: defaultSnippetContent
+ },
+ {
+ label: 'React',
+ name: 'react',
+ meta: 'live',
+ sandpackTemplate: 'react',
+ sandpackTheme: 'light',
+ snippetFileName: '/App.js',
+ snippetLanguage: 'jsx',
+ initialSnippetContent: defaultSnippetContent
+ },
+ {
+ label: 'Virtuoso',
+ name: 'virtuoso',
+ meta: 'live virtuoso',
+ sandpackTemplate: 'react-ts',
+ sandpackTheme: 'light',
+ snippetFileName: '/App.tsx',
+ initialSnippetContent: defaultSnippetContent,
+ dependencies: {
+ 'react-virtuoso': 'latest',
+ '@ngneat/falso': 'latest'
+ },
+ files: {
+ '/data.ts': dataCode
+ }
+ }
+ ]
+}
+
+export async function expressImageUploadHandler(image: File) {
+ const formData = new FormData()
+ formData.append('image', image)
+ const response = await fetch('/uploads/new', { method: 'POST', body: formData })
+ const json = (await response.json()) as { url: string }
+ return json.url
+}
+
+interface YoutubeDirectiveNode extends LeafDirective {
+ name: 'youtube'
+ attributes: { id: string }
+}
+
+export const YoutubeDirectiveDescriptor: DirectiveDescriptorHello CodeSandbox
+Start editing to see some magic happen!
+
+
+
+
+ )
+ }
+}
+
+export const ALL_PLUGINS = [
+ toolbarPlugin({ toolbarContents: () => Hello world from a markdown
} ``` -## CSS +CSS: ```css body { @@ -15,7 +16,7 @@ body { } ``` -## React sandpack: +React Sandpack: ```tsx live react export default function App() { @@ -23,7 +24,7 @@ export default function App() { } ``` -## Virtuoso Sandpack: +Virtuoso Sandpack: ```tsx live virtuoso import { Virtuoso } from 'react-virtuoso' diff --git a/src/stories/assets/dataCode.ts b/src/examples/assets/dataCode.ts similarity index 94% rename from src/stories/assets/dataCode.ts rename to src/examples/assets/dataCode.ts index efb5d275..8e3723d9 100644 --- a/src/stories/assets/dataCode.ts +++ b/src/examples/assets/dataCode.ts @@ -19,7 +19,7 @@ export function user(index = 0) { } } -const generated = [] as ArrayHello world from a markdown
+} +``` + +CSS: + +```css +html, body { + font-weight: 400; +} +``` + +# Heading 1 + + - bullet 1 *italic* + - bullet 2, **bold** some more text + - nested bullet + - nested bullet 2 + +1. Ordered bullet 1 +2. Ordered bullet 2 + +World Some **nested *formatting* text some more un *derl* ine**. + +And *some italic with nested **bold** text*. + +> Quote with **bold** and *italic* text. +> and some more. + +## Heading 2 + +`inlineVariable` code + +:::info +And note admonition +::: + +[A link](https://google.com/ "Googl Title") + +Image: + + + +React Sandpack: + + +```tsx +export default function App() { + returnHello world from a markdown
+} +``` + +```tsx live react +export default function App() { + returnHello world from a markdown
+} +``` + +Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. + diff --git a/src/examples/assets/live-demo-contents.md b/src/examples/assets/live-demo-contents.md new file mode 100644 index 00000000..e248a8b7 --- /dev/null +++ b/src/examples/assets/live-demo-contents.md @@ -0,0 +1,72 @@ +# Welcome + +This is a **live demo** of MDXEditor with all default features on. + +> The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. +> The idea is that a Markdown-formatted document should be publishable as-is, as plain text, +> without looking like it’s been marked up with tags or formatting instructions. + +[— Daring Fireball](https://daringfireball.net/projects/markdown/). + +In here, you can find the following markdown elements: + +* Headings +* Lists + * Unordered + * Ordered + * And nested ;) +* Links +* Bold/Italic/Underline formatting +* Tables +* Code block editors +* And much more. + +The current editor content is styled using the `@tailwindcss/typography` [plugin](https://tailwindcss.com/docs/typography-plugin). + +## What can you do here? + +This is a great location for you to test how editing markdown feels. If you have an existing markdown source, you can switch to source mode using the toggle group in the top right, paste it in there, and go back to rich text mode. + +If you need a few ideas, here's what you can try: + +1. Add your own code sample +2. Change the type of the headings +3. Insert a table, add a few rows and columns +4. Switch back to source markdown to see what you're going to get as an output +5. Test the diff feature to see how the markdown has changed +6. Add a frontmatter block through the toolbar button + +## A code sample + +MDXEditor embeds CodeMirror for code editing. + +```tsx +export default function App() { + return (Hello world
)
+}
+```
+
+## A live code example
+
+The block below is a live React component. You can configure multiple live code presets that specify the available npm packages and the default imports. You can also specify a default component that will be rendered in the live code block.
+
+```jsx live
+export default function App() {
+ return (
+
)
+}
+```
+
+## A table
+
+Play with the table below - add rows, columns, change column alignment. When editing,
+you can navigate the cells with `enter`, `shift+enter`, `tab` and `shift+tab`.
+
+| Item | In Stock | Price |
+| :---------------- | :------: | ----: |
+| Python Hat | True | 23.99 |
+| SQL Hat | True | 23.99 |
+| Codecademy Tee | False | 19.99 |
+| Codecademy Hoodie | False | 42.99 |
diff --git a/src/examples/assets/podkrepi-bg-markdown.md b/src/examples/assets/podkrepi-bg-markdown.md
new file mode 100644
index 00000000..af5c7657
--- /dev/null
+++ b/src/examples/assets/podkrepi-bg-markdown.md
@@ -0,0 +1,179 @@
+*Дневен център и социално предприятие в помощ на хората с проблеми в развитието от всякаква възраст и техните близки, където ще имат възможност да общуват, спортуват, творят, придобиват трудови умения и ще бъдат консултирани за успешната им интеграция в обществото*
+
+::youtube{#PTGPvun2JKI}
+
+**За идеята:**
+
+**Аутистичните личности** са "мозайка" от силни страни, дефицити и отклонения. Проблемите в общуването често са съчетани с интелектуален дефицит, забавено езиково развитие, дефицит на контрола върху импулсите и свръхактивност. Родителите също са с различни ресурси (емоционални, семейни и икономически) за справяне със стоварващата им се социална травма.
+
+Идеята е **Вила АутистикА** да се превърне в място, което да предлага обогатена комплексна услуга с иновативно управление, включваща **дневен център за деца и пълнолетни лица с проблеми в развитието и социално предприятие.**
+
+**Фондация "Помощ на лица с проблеми в развитието"** (ФПЛПР) с активното участие на партньорската им организация – **Сдружение "Аутизъм – образование, бъдеще и възможности"** (АОБВ) влезе във владение на поземлен имот (731 кв.м.) с разположена на него триетажна къща със застроена площ 116,83 кв.м. и разгъната застроена площ 614 кв.м., на ул. "Коста Петрунов" № 4, район "Слатина" в София, състояща се от полуподземен, първи, втори, трети подпокривен етаж и учредено безвъзмездно право на ползване, отдаден от Столична община за срок от 10 години.
+
+This is a live React component, that's being previewed in codesandbox.
+Editing it will update the fenced codeblock in the markdown.
+
+
+Във Вила АутистикА ще се доразвие и надгради модела "[**Творилница**](https://tvorilnica.org/za-nas/) **за развитие на когнитивните умения и повишаване на капацитета за автономност"**, както и **ТанцовоДвигателнаТерапия** за психосоматично развитие, която бе въведена от ФПЛПР по Програмата за социални иновации на Столична община.
+
+**Работата с родителите и близките** е друг ключов момент в планираните от тях дейности. Ефектът от терапиите и рехабилитацията за хората с проблеми в развитието е по-голям, ако е интегриран с психо-социални интервенции с цялото семейство.
+
+
+
+Предвижда се предоставянето на **лицензирани социални услуги** – информиране и консултиране; застъпничество и посредничество; общностна работа; терапия и рехабилитация; **подкрепа за придобиване на трудови умения**; дневна грижа, както и предоставяне на мобилни социални услуги, както и услуги в домашна среда. Дворното пространство ще се оборудва със **спортни площадки и ще се създаде био-стопанство.**
+
+Плановете на дружеството са, след като направят капитален ремонт и осигурят адекватна материално-техническа база, да кандидатстват за делегиран държавен бюджет. Желанието им е предоставените от тях услуги да бъдат абсолютно безплатни и достъпни за всички, които имат нужда от тях.
+
+**Гаранти на кампанията:**
+
+**Йоана Драгнева –** поп певица, телевизионен водещ, доброволец
+
+[**Фейсбук**](https://www.facebook.com/joanna.dragneva)
+
+
+
+**Йоанна Драгнева** е популярна българска поп певица. През 2008 г. заедно с група "Deep Zone Project" представят България на конкурса "Евровизия" с песента "DJ, Take Me Away". Йоанна има успешна телевизионна кариера като водеща на различни предавания. Социално активна, доброволец и съмишленик, подкрепя различни социални проекти с фокус върху децата и музиката.
+
+> "*Не всички деца с аутизъм се справят добре в обикновена училищна среда наравно с другите деца. Някои от тях имат нужда от повече помощ и повече подкрепа, точно затова е необходим такъв център, който да ги подхване от най-ранна детска възраст, за да не отпаднат от образователната система.*
+
+> *Нека всички ние да се обединим и помогнем това да бъде факт и да имаме в България такова място, така че децата да бъдат обгрижени и да се интегрират по-лесно."*
+
+**Георги Илиев** - кмет на СО - район "Слатина" и **Денимир Котев** - зам.кмет на СО - район "Слатина"
+
+> "*Уважаема г-жо Кънчева,*
+
+> *Във връзка с желанието ви за провеждане на акция за набиране на средства за ремонт на вила* "*АутистикА*", *Ви уверявам, че имате подкрепата ни.*"
+
+Документът може да видите [тук](https://drive.google.com/file/d/1OrzU4h_zgt6rvQfhoATxXT3k3_rCyXCV/view?usp=sharing)
+
+
+
+**София Георгиева –** поп певица
+
+[Фейсбук](https://www.facebook.com/SofiaOfficialPage)
+
+
+
+**София Георгиева** е поп певица. Сред изпятите от нея хитове са "Син талисман", "Сянка", "Изгубено сърце", "Сестра на вятъра", "Кристална тишина" и др. Социално ангажирана и винаги готова да застане зад каузи, които чувства със сърцето си. От 2010 г. е лице на информационна кампания за аутизъм, на която посвещава песента си [*Силна съм - София*](https://www.youtube.com/watch?v=hOaBgdCIWpw)
+
+> "*Информирането и възпитанието на обществото в приемане и разбиране на различните деца не е лека задача, но всички ние, посветили се на тази кауза, в частност аз, вярваме, че е възможно да го сторим, чрез личен пример и публично говорене.*
+
+> *Участвала съм и участвам в поредица кампании за набиране на средства за изграждане на центрове за работа с деца аутисти и се радвам, че обществото с разбиране откликва на подобни инициативи. Вярвам, че ще го сторим заедно и сега."*
+
+**Какво е направено до момента по кампанията?**
+
+В представите на партньорите ФПЛПР и АОБВ Вила АутистикА ще изглежда така:
+
+* Мазето – социална чайна, място където родителите да общуват, и Творилница.
+* Първи етаж – работа с деца;
+* Втори етаж – работа с младежи и пълнолетни;
+* Трети етаж – работа с родители, фокус групи, обучения, компютърна зала и библиотека.
+
+Предоставената сграда има нужда от основен ремонт. Работата по него започна през ноември 2021 г., когато имотът беше почистен с помощта на доброволци. На платформата [VMWare](https://vmware.brightfunds.org/funds/creation-of-a-day-care-center-and-social-enterprise-for-autistic-persons-villa-autistica?fbclid=IwAR2rwvpLA0YE-L2AmVOL2ppBSO7YNPjJJ_MdrUpsxZoi5KxNyp-Go1heHoc) има активна кампания за събиране на средства за предстоящия ремонт.
+
+
+
+**За какво ще се използват даренията?**
+
+Първият етап от реконструкцията на предоставената сграда е свързан с направата на покрива.
+
+**Разходи за труд и материали за ремонт на покрива:**
+
+* Демонтаж на стар покрив - 175 кв.м х 19,00 лв. = 3 325,00 лв.
+* Доставка и монтаж на дървени греди 8/10 175 кв.м х 32,00 лв. = 5 600,00 лв.
+* Доставка и монтаж на дъски 2,5см 175 кв.м х 33,00 лв. = 5 775,00 лв.
+* Доставка и монтаж на покривно фолио 175 кв.м х 11,00 лв.= 1 925,00 лв.
+* Доставка и монтаж на ламаринени керемиди - 175 кв.м х 68,00 лв.= 11 900,00 лв.
+* Доставка и монтаж на капаци по била 30 м х 50,00 лв. = 1 500,00 лв.
+* Доставка и монтаж на улуци с ПВЦ покритие 50 м х 22,00 лв.= 1 100,00 лв.
+* Доставка и монтаж на водостоци 80 м х 25,00 лв. = 2 000,00 лв.
+* Доставка и монтаж на покривен прозорец - 4бр. /78х118см/ 4 х 589,00 лв.= 2 356,00 лв.
+* Доставка и монтаж на обшивка за покривен прозорец 4 бр. х 289,00 лв. = 1 156,00 лв.
+* Общо без ДДС: 36 637,00 лв.
+* 20% ДДС:7 327,40 лв.
+* **Ремонт на покрив - 43 964,40 лв.**
+
+\*Ако по време на ремонта бъдат дарени материали или труд, които са предвидени за този етап от реконструкцията на сградата, средствата, предвидени за тях, ще се използват за някой от следващите етапи.
+
+\*\*Ако се съберат средства над целевата сума, те ще се използват за следващите етапи от ремонта на сградата.
+
+\*\*\*Офертата можете да видите [тук](https://drive.google.com/file/d/1eA5Z-hPaSEXwRFS0n3hlQeFuiTP2tKhV/view?usp=share_link).
+
+**Следващи етапи от реконструкцията на сградата:**
+
+* Дограми /стъкларски работи/
+* Топлоизолация и хидроизолация
+* Довършителни работи – мазилка и шпакловки
+
+**Героите на Вила АутистикА:**
+
+
+
+**Христина Бабалова и Виктор, 13 г.**
+
+> "*Не беше нужно много време след неговото диагностициране на 2,5 год. възраст, за да разбера, че МИСИЯТА в живота ми е, помагайки на моето дете, да помогна и на други аутистични личности. Работя по различни направления, свързани с подобряването на живота на нашите деца. Търся и намирам специалисти от помагащите професии, които са мотивирани да повишават професионалната си подготовка чрез специфични методи за работа и стратегии за комуникация с аутистичните личности.*
+
+> *Дългогодишното търсене на училище, което да приеме и реално да включи сина ми в системата на образованието, ме накара да разбера, че основният проблем – страхът от децата с разстройства от аутистичния спектър в масовото училище, се корени в незнанието как трябва да се подхожда към тях.*
+
+> *Безвъзмездно и доброволно работя за развиване на разнообразни спортни дейности за децата.*
+
+> *От Милена Кънчева получих първоначалната родителска психологическа подкрепа за приемане на диагнозата. Оттогава не спираме да работим и надграждаме за реализиране на кръга от услуги, водещи до повишаване качеството на живот на аутистичните личности.*
+
+> *Относно сина ми, не че е моето дете, но той е едно невероятно обичливо същество, което всеки ден доказва, че АУТИСТИТЕ МОГАТ!!!*
+
+> *Благодаря Ви от сърце и нека нашата Кампания придобие смисъл за обществото ни!!!"*
+
+
+
+**Борислава и Божидар, 19 г.**
+
+> "*В един мартенски ден преди няколко години с моя син Божидар (аутист, сега на 19 години), посетихме Творилница "Арт и Скок" по покана на Милена Кънчева. Още с първите ни стъпки в това пространство го усетихме като наше. Посрещнаха ни усмихнатите лица на малки и големи вселени, сред които единственото ни познато беше това на Милена. От този ден вече имахме нови приятели, които към днешна дата са като наше семейство. И така – започнахме да го посещаваме редовно, за Божи и досега остава любимо място, където отива с най-голямо желание и удоволствие. Започнах и аз да оставам и участвам в ателиетата, да разговарям с децата, да се интересувам за тяхното състояние от родителите им, споделяхме и разменяхме опит. След известно време Милена и Мирела ме попитаха защо не запиша да уча Логопедия. Явно видяха в мен нещо... Но това, което те направиха, беше съдбовно за мен, беше вдъхновение, насърчаване и подкрепа. Прегърнах тази идея с цялото си сърце и душа, осъзнавайки, че започвам нещо голямо. Записах магистратура "Езикова и речева патология" в НБУ, и ето ме сега – част от екипа, на мястото, от където започна всичко.*
+
+> *Благодаря за шанса, крилете и простора, които получих тук, където и детето ми придобива нови умения и се чувства безкрайно щастливо."*
+
+
+
+**Диана Първанова и Преслав, 17 г.**
+
+> "*Синът ми е прекрасен младеж на 17 години с ДЦП.*
+
+> *Имаме щастието да сме част от творилница "Арт и Скок".*
+
+> *Всяко едно посещение е свързано с предизвикателство за Преслав, да измайстори от глина нещо ново и красиво. Чувства се подкрепен, приобщен, обичан и горд. Аз също.*
+
+> *Благодарни сме на хората, които стоят доброволно зад тази инициатива!"*
+
+**За организатора:**
+
+**Фондация "Помощ на лица с проблеми в развитието" (ФПЛПР)** е регистрирана през 2012 г. в обществена полза. Нейната мисия е **да подобрява качеството на живот** на хората с проблеми в развитието и техните семейства, да активизира и насочи интереса на българското общество в посока на **формиране на нагласа за толерантност и сътрудничество към "различните" и да обединява съмишленици**, неправителствени организации, заинтересовани институции доброволци в общи каузи.
+
+ През годините са предприети **множество инициативи и кампании**, част от които са:
+
+* издаване на **книги за повишаване информираността на обществото за аутизма**, както и на теми за различието, толерантността и приобщаващото образование;
+* стартиране на **информационно-комуникационната кампания "Да си различен е привилегия голяма"** с изложба-базар;
+* създаване на **клуб "Природата и ние";**
+* стартиране на **проект "Приятели на деца и младежи с проблеми от аутистичния спектър";**
+* предоставяне на възможност за **групови хипотерапии**, проведени на място в различни дневни центрове за деца и младежи с "различия";
+* подкрепа за създаване на **Специализиран клас** за децата с разстройства от аутистичния спектър;
+* създаване на **Творилница "Арт и Скок" -** включваща три ателиета ( "Текстил", "Керамика" и "Дигитални технологии") за развитие на когнитивните и интелектуални способности за приобщаващо образование, които подпомагат качествено и кариерното развитие на децата и младежите:
+* Внедряване на **ТанцовоДвигателнаТрапия** /ТДТ/ в корекционното въздействие при деца и младежи със специални потребности и/или с разстройства от аутистичния спектър;
+
+
+
+[Творилница - ФПЛПР](https://tvorilnica.org/?fbclid=IwAR0-y_kcSh82H3tKTVPZlEr9CvsK2658o-N_7Hew8wIZY1YYB7eGcam3lcQ)
+
+[ГД Помощ на лица с проблеми в развитието - фейсбук](https://bg-bg.facebook.com/gdplpr/)
+
+**За неговият партньор:**
+
+ 
+
+**Сдружение "Аутизъм – образование, бъдеще и възможности"** е организация с нестопанска цел от 2020 г., съставена от родители на деца от аутистичния спектър. Събрани от общата си съдба и кауза, те работят и се борят за подобряване на състоянието, осигуряване на обучение и пълноценен живот на децата с аутизъм, както и за нормален живот на самите тях – родителите, които са неотлъчно до децата.
+
+**Проектите на сдружението: Специален клас –** съвместно с Основно прогресивно училище 3 – Слатина, София и помощта на МОН. В него се прилага образователна програма по модела на **Competent Learner Model (CLM)**, която изгражда основата на тяхната интеграция и е адаптирана към българските условия. Проектът продължава вече трета учебна година, но за съжаление на този етап се обучават само ученици до 12-годишна възраст. **Треньори с мисия**, които безвъзмездно тренират децата. **Адаптирана спортна площадка** на територията на Основно прогресивно училище 3 – Слатина. Инициирали са и други проекти, свързани с **музикотерапия и спорт**.
+
+
+
+**Повече за АОБВ:**
+
+[АОБВ - фейсбук страница](https://www.facebook.com/autismeducationopportunities)
+
+[АОБВ - уебсайт](http://www.aobv.eu/)
\ No newline at end of file
diff --git a/src/stories/assets/table-markdown.md b/src/examples/assets/table.md
similarity index 86%
rename from src/stories/assets/table-markdown.md
rename to src/examples/assets/table.md
index e88ec8f1..2624e027 100644
--- a/src/stories/assets/table-markdown.md
+++ b/src/examples/assets/table.md
@@ -1,6 +1,4 @@
----
-title: Hello World
----
+Table:
| Syntax | Description | Profit |
| ----------- | ------------- | ------:|
diff --git a/src/examples/basics.tsx b/src/examples/basics.tsx
new file mode 100644
index 00000000..3ae9f9b2
--- /dev/null
+++ b/src/examples/basics.tsx
@@ -0,0 +1,239 @@
+import React from 'react'
+import {
+ CodeBlockEditorDescriptor,
+ DiffSourceToggleWrapper,
+ GenericJsxEditor,
+ InsertFrontmatter,
+ JsxComponentDescriptor,
+ MDXEditor,
+ MDXEditorMethods,
+ UndoRedo,
+ codeBlockPlugin,
+ codeMirrorPlugin,
+ diffSourcePlugin,
+ frontmatterPlugin,
+ headingsPlugin,
+ imagePlugin,
+ jsxPlugin,
+ linkPlugin,
+ listsPlugin,
+ markdownShortcutPlugin,
+ quotePlugin,
+ sandpackPlugin,
+ tablePlugin,
+ thematicBreakPlugin,
+ toolbarPlugin,
+ useCodeBlockEditorContext
+} from '../'
+import codeBlocksMarkdown from './assets/code-blocks.md?raw'
+import imageMarkdown from './assets/image.md?raw'
+import jsxMarkdown from './assets/jsx.md?raw'
+import tableMarkdown from './assets/table.md?raw'
+
+import { virtuosoSampleSandpackConfig } from './_boilerplate'
+
+const helloMarkdown = `Hello world am **here** more under line`
+export function Bare() {
+ const ref = React.useRef e.nativeEvent.stopImmediatePropagation()}>
+