React with Native

Bringing together React and React Native

README

Writer input

writer-input (

OperationClassification

TODO: Ensure embedding this will embed the actual docs in my markdown renderer. I guess it might already do so!

TODO: It would be great to learn more about this topic and see if I can make more cross-environment packages. A great use case would be to create a wrapper around the current fs-orm to enable using it at the frontend too.

OperationClassification ui-esm)

Writer Input

component to create a writer input

This is a ui-esm operation. This means it's a ui operation that builds to javascript with ESM module resolving... It was based on this example: https://prateeksurana.me/blog/react-library-with-typescript/

Api reference

📄 writerInitialValues (exported const)

<WriterInput />

Writer input for any utf8 based text, file or no file

Input
-
Output	`JSX.Element`

📄 WriterInput (exported const)

Writer input for any utf8 based text, file or no file

<MarkdownView />

Input
props	{ view: view / presentation, markdownParse: `MarkdownParse`, markdownParseRenderConfig: `MarkdownParseRenderConfig`, }
Output	`JSX.Element`

📄 MarkdownView (exported const)

<EditWriterInput />

the newer one, eventually to replace

ContextTextArea

TextArea with ability to enhance personal database and execute prompts

QUESTION:

How to make color highlighting?

I guess we need to wrap all words with a span and make it contenteditable, so we can create a editor where we are styling all words that are written

We can then also change the value of the word if you are NOT editing that word.

So you would only see the true value of a word when your cursor is on that word

TODO:

replace the textarea with a div contenteditable
make selectionStart and selectionEnd still working (on the original text)
whenever you stop editing a word, it needs to be wrapped with a span and styled with a function taking that word and returning a style
whenver you start a new word through a separator, an empty span should be created
the span of the current word being edited must have a location (x,y). get that exact location so we can render an autocompletion intellisense

ContextTextArea

Input
-
Output	`JSX.Element`

📄 EditWriterInput (exported const)

the newer one, eventually to replace

ContextTextArea

TextArea with ability to enhance personal database and execute prompts

QUESTION:

How to make color highlighting?

I guess we need to wrap all words with a span and make it contenteditable, so we can create a editor where we are styling all words that are written

We can then also change the value of the word if you are NOT editing that word.

So you would only see the true value of a word when your cursor is on that word

TODO:

replace the textarea with a div contenteditable
make selectionStart and selectionEnd still working (on the original text)
whenever you stop editing a word, it needs to be wrapped with a span and styled with a function taking that word and returning a style
whenver you start a new word through a separator, an empty span should be created
the span of the current word being edited must have a location (x,y). get that exact location so we can render an autocompletion intellisense

ContextTextArea

Internal

Show internal (67)

<Completion />

Input
props	{ augmentedWord: AugmentedWord AugmentedWords should have a small footprint since there can be many of them Words with a specific affix (backticks, bolded, italic) will match against these. Used to link automatically to functionNames, InterfaceNames, operation-names, words, and more.. TODO: This is a much more general purpose thing than just `markdown-reader-types`. Move to it's own package AugmentedWord, augmentedWordObject?: `MappedObject<AugmentedWord>`, }
Output	`JSX.Element`

<ContentEditableDivInput />

Div that is contentEditable by default and has possibilities for color/style highlighting, autocomplete, subtexts and tooltips

Input
-
Output	`JSX.Element`

<ContextTextArea />

TextArea with ability to enhance personal database and execute prompts

QUESTION:

How to make color highlighting?

I guess we need to wrap all words with a span and make it contenteditable, so we can create a editor where we are styling all words that are written

We can then also change the value of the word if you are NOT editing that word.

So you would only see the true value of a word when your cursor is on that word

TODO:

replace the textarea with a div contenteditable
make selectionStart and selectionEnd still working (on the original text)
whenever you stop editing a word, it needs to be wrapped with a span and styled with a function taking that word and returning a style
whenver you start a new word through a separator, an empty span should be created
the span of the current word being edited must have a location (x,y). get that exact location so we can render an autocompletion intellisense

Input
-
Output	`JSX.Element`

<DivContentEditable />

Input
-
Output	`JSX.Element`

editSubtextSubwordConfig()

Interesting... In order to auto-generate a form for this, we need to combine the two into a simple function that does NOTHING. Why? Because we can't store it in the database, it is better to keep this in the frontend...

NB: DEPRECATED: TODO: function isn't used. Since the indexation didn't go right, the solution with a

SimplifiedSchemaForm

Recursive component that renders a form for a SimplifiedSchema

SimplifiedSchemaForm ended up being easier. Keeping it here because I need to fix the indexation nonetheless.

Input
subtextConfig	SubtextConfig Configuration of what should be shown in the subtext SubtextConfig
Output	{ subtextConfig: { isEnabled?: boolean, translations?: { language: english / dutch / nepali / portuguese / brazilian / german / french / spanish / italian / norwegian / swedish / danish / vietnamese / indonesian / southAfrican / tokiPona / hindi / mandarin / arabic / bengali / urdu / japanese / swahili, showAlternative?: boolean, showPhonetic?: boolean, showLatin?: boolean, showTokiPona?: boolean, showCommon?: boolean, }[], showEmojiTranslation?: boolean, showDefinitionsWithPriority?: critical / high / medium / low[], showRelated?: { type: image / asset / pages / data / code, quantity: single / short / all, }[], }, subwordConfig: { isEnabled?: boolean, subwordSize?: normal / mini / micro, translations?: english / dutch / nepali / portuguese / brazilian / german / french / spanish / italian / norwegian / swedish / danish / vietnamese / indonesian / southAfrican / tokiPona / hindi / mandarin / arabic / bengali / urdu / japanese / swahili[], translationsViewMode?: disabled / tooltip / context / subword, showDefinition?: boolean, occurenceAmountViewMode?: disabled / tooltip / context / subword, blurMode?: disabled / special, audioMode?: disabled / tooltip / context / subword, replaceWordMode?: tokiPona / disabled / translate / alternative / phonetic / emoji, heatmapMode?: disabled / projectFrequency / englishFrequency, }, }

<FrontmatterForm />

Renders a form for frontmatter without save button

Input
-
Output	`JSX.Element`

getContext()

Gets the current word you are typing from a text and the cursor position.

Takes into account multiple word separators: tabs, newlines, and spaces.

Input
editorDetails	{ text: string, positionIndex: number, }
Output	{ wordAtPosition: string, positionIndex: number, }

getSubtext()

make a subtext text based on the text of a complete paragraph (may contain single newlines and other markdown stuff, but never double newlines)

Returns either the subtext string or a HTML string with a container around the subtext, depending on if you provide withContainer

Input
markdownString	string	Raw markdown string
Output	string

getTextSegments()

Iterates over all child-nodes in the editor, replaces text with a segment, and replaces nodes with a flat list of segments

Returns all textSegments in an array

Input
-
Output	{ text: string, node: { }, }[]

getWriterTypeFromContent()

Input
text	string
Output	typescript / markdown / other

isAugmentedWordMatch()

Input
augmentedWord	AugmentedWord AugmentedWords should have a small footprint since there can be many of them Words with a specific affix (backticks, bolded, italic) will match against these. Used to link automatically to functionNames, InterfaceNames, operation-names, words, and more.. TODO: This is a much more general purpose thing than just `markdown-reader-types`. Move to it's own package AugmentedWord
Output

isTypescript()

only detect typescript if the string starts with import. must be improved later on. It would be great to be able to detect that it's a typescript file even if it contains syntax errors.

Input
text	string
Output

<MarkdownCompletions />

Input
props	{ context: { }, augmentedWords?: AugmentedWord AugmentedWords should have a small footprint since there can be many of them Words with a specific affix (backticks, bolded, italic) will match against these. Used to link automatically to functionNames, InterfaceNames, operation-names, words, and more.. TODO: This is a much more general purpose thing than just `markdown-reader-types`. Move to it's own package AugmentedWord[], augmentedWordObject?: `MappedObject<AugmentedWord>`, }
Output	`JSX.Element`

<MarkdownParsePresentation />

Input
props	{ markdownParse: `MarkdownParse`, augmentedWordObject?: `MappedObject<AugmentedWord>`, projectRelativeBaseFolderPath: string, projectRelativeMarkdownFilePath: string, }
Output	`JSX.Element`

<MarkedParagraph />

Input
-
Output	`JSX.Element`

<MarkedText />

Input
-
Output	`JSX.Element`

<MarkedToken />

Function that can be used to iterate over the marked parse and style every token, recursively

NB: this returns a regular react component, and should, for setting it as InnerHTML, be parsed with the ReactDOMServer

Input
props	{ item: `marked.Token`, subtextConfig: SubtextConfig Configuration of what should be shown in the subtext SubtextConfig, subwordConfig: SubwordConfig Configurate what should be shown about words SubwordConfig, markdownFileConfig: `MarkdownParseRenderConfig`, testModeEnabled?: boolean, }
Output	`JSX.Element`

omitSpecialCharactersFromStart()

Omits all special characters from the start of a word for the first special character it finds. The other special characters found after that won't be trimmed.

Input
word (optional)	string
Output

parseTextContentToHtmlString()

Returns a html string from a text string that can be rendered in the dom

NB: because we're parsing text from div.innerText, sometimes there are two newlines when there should be one break.

Three newlines means there should be two breaks...

Input
-
Output	`String`

<SmartContentEditableDivInput />

Uses ContentEditableDivInput, and attaches the Completions to it based on the content type. Also all other data required...

NB: TODO: once the autocomplete inside the contentEditable is done, these things should move inside of there. I need a component that has lots of UI/UX but isn't very smart. This will be able to be re-used in many usecases...

Input
-
Output	`JSX.Element`

<SpannedSentence />

Needs to be done for every text that can have potential interactions

Input
props	{ sentence: string, subtextConfig: SubtextConfig Configuration of what should be shown in the subtext SubtextConfig, subwordConfig: SubwordConfig Configurate what should be shown about words SubwordConfig, markdownFileConfig: `MarkdownParseRenderConfig`, testModeEnabled?: boolean, }
Output	`JSX.Element`

<SubtextContainer />

Returns a string with HTML for the subtext container, given you already have

Input
props	{ rawMarkdown: string, subtextConfig: SubtextConfig Configuration of what should be shown in the subtext SubtextConfig, }
Output	`JSX.Element`

<Subword />

Input
-
Output	`JSX.Element`

testAllContentEditableRenderComponents()

Can be used to test all ContentEditableRenderComponents with example inputs

Instead you can also enable devmode and just check it on the live examples

Input
-
Output

testContentEditableRenderComponent()

Creates an element from the markdown input, and then uses the toMarkdownString function to make it markdown again.

TODO: use

writer-functions

⬅

writer-types

➡

React with Native

Bringing together React and React Native

GitHub

README

Writer input

writer-input (

OperationClassification

TODO: Ensure embedding this will embed the actual docs in my markdown renderer. I guess it might already do so!

OperationClassification ui-esm)

Writer Input

component to create a writer input

Api reference

📄 writerInitialValues (exported const)

<WriterInput />

Writer input for any utf8 based text, file or no file

Input
-
Output	`JSX.Element`

📄 WriterInput (exported const)

Writer input for any utf8 based text, file or no file

<MarkdownView />

Input
props	{ view: view / presentation, markdownParse: `MarkdownParse`, markdownParseRenderConfig: `MarkdownParseRenderConfig`, }
Output	`JSX.Element`

📄 MarkdownView (exported const)

<EditWriterInput />

the newer one, eventually to replace

ContextTextArea

TextArea with ability to enhance personal database and execute prompts

QUESTION:

How to make color highlighting?

I guess we need to wrap all words with a span and make it contenteditable, so we can create a editor where we are styling all words that are written

We can then also change the value of the word if you are NOT editing that word.

So you would only see the true value of a word when your cursor is on that word

TODO:

replace the textarea with a div contenteditable
make selectionStart and selectionEnd still working (on the original text)
whenever you stop editing a word, it needs to be wrapped with a span and styled with a function taking that word and returning a style
whenver you start a new word through a separator, an empty span should be created
the span of the current word being edited must have a location (x,y). get that exact location so we can render an autocompletion intellisense

ContextTextArea

Input
-
Output	`JSX.Element`

📄 EditWriterInput (exported const)

the newer one, eventually to replace

ContextTextArea

TextArea with ability to enhance personal database and execute prompts

QUESTION:

How to make color highlighting?

I guess we need to wrap all words with a span and make it contenteditable, so we can create a editor where we are styling all words that are written

We can then also change the value of the word if you are NOT editing that word.

So you would only see the true value of a word when your cursor is on that word

TODO:

replace the textarea with a div contenteditable
make selectionStart and selectionEnd still working (on the original text)
whenever you stop editing a word, it needs to be wrapped with a span and styled with a function taking that word and returning a style
whenver you start a new word through a separator, an empty span should be created
the span of the current word being edited must have a location (x,y). get that exact location so we can render an autocompletion intellisense

ContextTextArea

Internal

Show internal (67)

<Completion />

Input
props	{ augmentedWord: AugmentedWord AugmentedWords should have a small footprint since there can be many of them Words with a specific affix (backticks, bolded, italic) will match against these. Used to link automatically to functionNames, InterfaceNames, operation-names, words, and more.. TODO: This is a much more general purpose thing than just `markdown-reader-types`. Move to it's own package AugmentedWord, augmentedWordObject?: `MappedObject<AugmentedWord>`, }
Output	`JSX.Element`

<ContentEditableDivInput />

Div that is contentEditable by default and has possibilities for color/style highlighting, autocomplete, subtexts and tooltips

Input
-
Output	`JSX.Element`

<ContextTextArea />

TextArea with ability to enhance personal database and execute prompts

QUESTION:

How to make color highlighting?

I guess we need to wrap all words with a span and make it contenteditable, so we can create a editor where we are styling all words that are written

We can then also change the value of the word if you are NOT editing that word.

So you would only see the true value of a word when your cursor is on that word

TODO:

replace the textarea with a div contenteditable
make selectionStart and selectionEnd still working (on the original text)
whenever you stop editing a word, it needs to be wrapped with a span and styled with a function taking that word and returning a style
whenver you start a new word through a separator, an empty span should be created
the span of the current word being edited must have a location (x,y). get that exact location so we can render an autocompletion intellisense

Input
-
Output	`JSX.Element`

<DivContentEditable />

Input
-
Output	`JSX.Element`

editSubtextSubwordConfig()

NB: DEPRECATED: TODO: function isn't used. Since the indexation didn't go right, the solution with a

SimplifiedSchemaForm

Recursive component that renders a form for a SimplifiedSchema

SimplifiedSchemaForm ended up being easier. Keeping it here because I need to fix the indexation nonetheless.

Input
subtextConfig	SubtextConfig Configuration of what should be shown in the subtext SubtextConfig
Output	{ subtextConfig: { isEnabled?: boolean, translations?: { language: english / dutch / nepali / portuguese / brazilian / german / french / spanish / italian / norwegian / swedish / danish / vietnamese / indonesian / southAfrican / tokiPona / hindi / mandarin / arabic / bengali / urdu / japanese / swahili, showAlternative?: boolean, showPhonetic?: boolean, showLatin?: boolean, showTokiPona?: boolean, showCommon?: boolean, }[], showEmojiTranslation?: boolean, showDefinitionsWithPriority?: critical / high / medium / low[], showRelated?: { type: image / asset / pages / data / code, quantity: single / short / all, }[], }, subwordConfig: { isEnabled?: boolean, subwordSize?: normal / mini / micro, translations?: english / dutch / nepali / portuguese / brazilian / german / french / spanish / italian / norwegian / swedish / danish / vietnamese / indonesian / southAfrican / tokiPona / hindi / mandarin / arabic / bengali / urdu / japanese / swahili[], translationsViewMode?: disabled / tooltip / context / subword, showDefinition?: boolean, occurenceAmountViewMode?: disabled / tooltip / context / subword, blurMode?: disabled / special, audioMode?: disabled / tooltip / context / subword, replaceWordMode?: tokiPona / disabled / translate / alternative / phonetic / emoji, heatmapMode?: disabled / projectFrequency / englishFrequency, }, }

<FrontmatterForm />

Renders a form for frontmatter without save button

Input
-
Output	`JSX.Element`

getContext()

Gets the current word you are typing from a text and the cursor position.

Takes into account multiple word separators: tabs, newlines, and spaces.

Input
editorDetails	{ text: string, positionIndex: number, }
Output	{ wordAtPosition: string, positionIndex: number, }

getSubtext()

make a subtext text based on the text of a complete paragraph (may contain single newlines and other markdown stuff, but never double newlines)

Returns either the subtext string or a HTML string with a container around the subtext, depending on if you provide withContainer

Input
markdownString	string	Raw markdown string
Output	string

getTextSegments()

Iterates over all child-nodes in the editor, replaces text with a segment, and replaces nodes with a flat list of segments

Returns all textSegments in an array

Input
-
Output	{ text: string, node: { }, }[]

getWriterTypeFromContent()

Input
text	string
Output	typescript / markdown / other

isAugmentedWordMatch()

Input
augmentedWord	AugmentedWord AugmentedWords should have a small footprint since there can be many of them Words with a specific affix (backticks, bolded, italic) will match against these. Used to link automatically to functionNames, InterfaceNames, operation-names, words, and more.. TODO: This is a much more general purpose thing than just `markdown-reader-types`. Move to it's own package AugmentedWord
Output

isTypescript()

only detect typescript if the string starts with import. must be improved later on. It would be great to be able to detect that it's a typescript file even if it contains syntax errors.

Input
text	string
Output

<MarkdownCompletions />

Input
props	{ context: { }, augmentedWords?: AugmentedWord AugmentedWords should have a small footprint since there can be many of them Words with a specific affix (backticks, bolded, italic) will match against these. Used to link automatically to functionNames, InterfaceNames, operation-names, words, and more.. TODO: This is a much more general purpose thing than just `markdown-reader-types`. Move to it's own package AugmentedWord[], augmentedWordObject?: `MappedObject<AugmentedWord>`, }
Output	`JSX.Element`

<MarkdownParsePresentation />

Input
props	{ markdownParse: `MarkdownParse`, augmentedWordObject?: `MappedObject<AugmentedWord>`, projectRelativeBaseFolderPath: string, projectRelativeMarkdownFilePath: string, }
Output	`JSX.Element`

<MarkedParagraph />

Input
-
Output	`JSX.Element`

<MarkedText />

Input
-
Output	`JSX.Element`

<MarkedToken />

Function that can be used to iterate over the marked parse and style every token, recursively

NB: this returns a regular react component, and should, for setting it as InnerHTML, be parsed with the ReactDOMServer

Input
props	{ item: `marked.Token`, subtextConfig: SubtextConfig Configuration of what should be shown in the subtext SubtextConfig, subwordConfig: SubwordConfig Configurate what should be shown about words SubwordConfig, markdownFileConfig: `MarkdownParseRenderConfig`, testModeEnabled?: boolean, }
Output	`JSX.Element`

omitSpecialCharactersFromStart()

Omits all special characters from the start of a word for the first special character it finds. The other special characters found after that won't be trimmed.

Input
word (optional)	string
Output

parseTextContentToHtmlString()

Returns a html string from a text string that can be rendered in the dom

NB: because we're parsing text from div.innerText, sometimes there are two newlines when there should be one break.

Three newlines means there should be two breaks...

Input
-
Output	`String`

<SmartContentEditableDivInput />

Uses ContentEditableDivInput, and attaches the Completions to it based on the content type. Also all other data required...

Input
-
Output	`JSX.Element`

<SpannedSentence />

Needs to be done for every text that can have potential interactions

Input
props	{ sentence: string, subtextConfig: SubtextConfig Configuration of what should be shown in the subtext SubtextConfig, subwordConfig: SubwordConfig Configurate what should be shown about words SubwordConfig, markdownFileConfig: `MarkdownParseRenderConfig`, testModeEnabled?: boolean, }
Output	`JSX.Element`