Revamp rich text components folder structure (#1472)

# Pull Request

## 🤨 Rationale

<!---
Provide some background and a description of your work.
What problem does this change solve?

Include links to issues, work items, or other discussions.
-->
Reorganize the folder structure of the `nimble-rich-text-editor` and
`nimble-rich-text-viewer` to share the common functionalities between
components.

Part of #1447

## 👩‍💻 Implementation

<!---
Describe how the change addresses the problem. Consider factors such as
complexity, alternative solutions, performance impact, etc.

Consider listing files with important changes or comment on them
directly in the pull request.
-->

Revamped folder structure in nimble-components:
```
/rich-text
    /editor
        editor component files...
    /viewer
        viewer component files...
    /specs
        README.md (common spec file for both editor and viewer)
```

Revamped folder structure in nimble-angular:
```
/rich-text
    /editor
        editor component files...
    /viewer
        viewer component files...
```

Related discussion:
#1424 (comment)

## 🧪 Testing

<!---
Detail the testing done to ensure this submission meets requirements. 

Include automated/manual test additions or modifications, testing done
on a local build, private CI run results, and additional testing not
covered by automatic pull request validation.
-->
- Manually tested the components in the local storybook build.

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.

angular-workspace/projects/example-client-app/src/app/app.module.ts

@@ -23,8 +23,8 @@ import { NimbleTableColumnDateTextModule } from '@ni/nimble-angular/table-column
 import { NimbleTableColumnEnumTextModule } from '@ni/nimble-angular/table-column/enum-text';
 import { NimbleTableColumnIconModule } from '@ni/nimble-angular/table-column/icon';
 import { NimbleTableColumnNumberTextModule } from '@ni/nimble-angular/table-column/number-text';
-import { NimbleRichTextViewerModule } from '@ni/nimble-angular/rich-text-viewer';
-import { NimbleRichTextEditorModule } from '@ni/nimble-angular/rich-text-editor';
+import { NimbleRichTextViewerModule } from '@ni/nimble-angular/rich-text/viewer';
+import { NimbleRichTextEditorModule } from '@ni/nimble-angular/rich-text/editor';
 import { AppComponent } from './app.component';
 import { CustomAppComponent } from './customapp/customapp.component';
 import { HeaderComponent } from './header/header.component';

angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.ts

@@ -3,7 +3,7 @@ import { Component, Inject, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { DrawerLocation, MenuItem, NimbleDialogDirective, NimbleDrawerDirective, OptionNotFound, OPTION_NOT_FOUND, UserDismissed } from '@ni/nimble-angular';
 import type { TableRecord } from '@ni/nimble-angular/table';
-import { NimbleRichTextEditorDirective } from '@ni/nimble-angular/rich-text-editor';
+import { NimbleRichTextEditorDirective } from '@ni/nimble-angular/rich-text/editor';
 import { BehaviorSubject, Observable } from 'rxjs';
 
 interface ComboboxItem {

angular-workspace/projects/ni/nimble-angular/rich-text-editor/nimble-rich-text-editor.directive.ts → angular-workspace/projects/ni/nimble-angular/rich-text/editor/nimble-rich-text-editor.directive.ts

@@ -1,5 +1,5 @@
 import { Directive, ElementRef, EventEmitter, HostListener, Input, Output, Renderer2 } from '@angular/core';
-import type { RichTextEditor } from '@ni/nimble-components/dist/esm/rich-text-editor';
+import type { RichTextEditor } from '@ni/nimble-components/dist/esm/rich-text/editor';
 import { BooleanValueOrAttribute, toBooleanProperty } from '@ni/nimble-angular/internal-utilities';
 
 export type { RichTextEditor };

angular-workspace/projects/ni/nimble-angular/rich-text-editor/nimble-rich-text-editor.module.ts → angular-workspace/projects/ni/nimble-angular/rich-text/editor/nimble-rich-text-editor.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NimbleRichTextEditorDirective } from './nimble-rich-text-editor.directive';
 
-import '@ni/nimble-components/dist/esm/rich-text-editor';
+import '@ni/nimble-components/dist/esm/rich-text/editor';
 
 @NgModule({
     declarations: [NimbleRichTextEditorDirective],

angular-workspace/projects/ni/nimble-angular/rich-text/editor/testing/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public-api.ts"
+    }
+}

angular-workspace/projects/ni/nimble-angular/rich-text-editor/testing/rich-text-editor.pageobject.ts → angular-workspace/projects/ni/nimble-angular/rich-text/editor/testing/rich-text-editor.pageobject.ts

@@ -1,5 +1,5 @@
-import { RichTextEditorPageObject } from '@ni/nimble-components/dist/esm/rich-text-editor/testing/rich-text-editor.pageobject';
-import type { ToolbarButton } from '@ni/nimble-components/dist/esm/rich-text-editor/testing/types';
+import { RichTextEditorPageObject } from '@ni/nimble-components/dist/esm/rich-text/editor/testing/rich-text-editor.pageobject';
+import type { ToolbarButton } from '@ni/nimble-components/dist/esm/rich-text/editor/testing/types';
 
 export { RichTextEditorPageObject };
 export type { ToolbarButton };

angular-workspace/projects/ni/nimble-angular/rich-text-viewer/nimble-rich-text-viewer.directive.ts → angular-workspace/projects/ni/nimble-angular/rich-text/viewer/nimble-rich-text-viewer.directive.ts

@@ -1,5 +1,5 @@
 import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
-import type { RichTextViewer } from '@ni/nimble-components/dist/esm/rich-text-viewer';
+import type { RichTextViewer } from '@ni/nimble-components/dist/esm/rich-text/viewer';
 
 export type { RichTextViewer };
 

angular-workspace/projects/ni/nimble-angular/rich-text-viewer/nimble-rich-text-viewer.module.ts → angular-workspace/projects/ni/nimble-angular/rich-text/viewer/nimble-rich-text-viewer.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NimbleRichTextViewerDirective } from './nimble-rich-text-viewer.directive';
 
-import '@ni/nimble-components/dist/esm/rich-text-viewer';
+import '@ni/nimble-components/dist/esm/rich-text/viewer';
 
 @NgModule({
     declarations: [NimbleRichTextViewerDirective],

angular-workspace/projects/ni/nimble-angular/rich-text/viewer/testing/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public-api.ts"
+    }
+}

angular-workspace/projects/ni/nimble-angular/rich-text-viewer/testing/rich-text-viewer.pageobject.ts → angular-workspace/projects/ni/nimble-angular/rich-text/viewer/testing/rich-text-viewer.pageobject.ts

@@ -1,3 +1,3 @@
-import { RichTextViewerPageObject } from '@ni/nimble-components/dist/esm/rich-text-viewer/testing/rich-text-viewer.pageobject';
+import { RichTextViewerPageObject } from '@ni/nimble-components/dist/esm/rich-text/viewer/testing/rich-text-viewer.pageobject';
 
 export { RichTextViewerPageObject };

change/@ni-nimble-angular-3a7f08ef-dd7e-4bae-8b30-937d3830d563.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Revamp folder structure for rich text components",
+  "packageName": "@ni/nimble-angular",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@ni-nimble-components-c9aef77f-1a41-4240-b114-67fc1d5c6c2f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Revamp folder structure for rich text components",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/all-components.ts

@@ -33,8 +33,8 @@ import './menu-item';
 import './number-field';
 import './radio';
 import './radio-group';
-import './rich-text-editor';
-import './rich-text-viewer';
+import './rich-text/editor';
+import './rich-text/viewer';
 import './select';
 import './spinner';
 import './switch';

packages/nimble-components/src/rich-text-editor/index.ts → packages/nimble-components/src/rich-text/editor/index.ts

@@ -35,9 +35,9 @@ import type { PlaceholderOptions } from '@tiptap/extension-placeholder';
 import Text from '@tiptap/extension-text';
 import { template } from './template';
 import { styles } from './styles';
-import type { ToggleButton } from '../toggle-button';
+import type { ToggleButton } from '../../toggle-button';
 import { TipTapNodeName } from './types';
-import type { ErrorPattern } from '../patterns/error/types';
+import type { ErrorPattern } from '../../patterns/error/types';
 
 declare global {
     interface HTMLElementTagNameMap {

packages/nimble-components/src/rich-text-editor/styles.ts → packages/nimble-components/src/rich-text/editor/styles.ts

@@ -13,8 +13,8 @@ import {
     iconSize,
     smallDelay,
     standardPadding
-} from '../theme-provider/design-tokens';
-import { styles as errorStyles } from '../patterns/error/styles';
+} from '../../theme-provider/design-tokens';
+import { styles as errorStyles } from '../../patterns/error/styles';
 
 export const styles = css`
     ${display('inline-flex')}

packages/nimble-components/src/rich-text-editor/template.ts → packages/nimble-components/src/rich-text/editor/template.ts

@@ -1,19 +1,19 @@
 import { html, ref } from '@microsoft/fast-element';
 import type { RichTextEditor } from '.';
-import { toolbarTag } from '../toolbar';
-import { toggleButtonTag } from '../toggle-button';
-import { iconBoldBTag } from '../icons/bold-b';
-import { iconItalicITag } from '../icons/italic-i';
-import { iconListTag } from '../icons/list';
-import { iconNumberListTag } from '../icons/number-list';
+import { toolbarTag } from '../../toolbar';
+import { toggleButtonTag } from '../../toggle-button';
+import { iconBoldBTag } from '../../icons/bold-b';
+import { iconItalicITag } from '../../icons/italic-i';
+import { iconListTag } from '../../icons/list';
+import { iconNumberListTag } from '../../icons/number-list';
 import {
     richTextToggleBoldLabel,
     richTextToggleItalicsLabel,
     richTextToggleBulletedListLabel,
     richTextToggleNumberedListLabel
-} from '../label-provider/rich-text/label-tokens';
-import { errorTextTemplate } from '../patterns/error/template';
-import { iconExclamationMarkTag } from '../icons/exclamation-mark';
+} from '../../label-provider/rich-text/label-tokens';
+import { errorTextTemplate } from '../../patterns/error/template';
+import { iconExclamationMarkTag } from '../../icons/exclamation-mark';
 
 // prettier-ignore
 export const template = html<RichTextEditor>`

packages/nimble-components/src/rich-text-editor/testing/rich-text-editor.pageobject.ts → packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts

@@ -1,7 +1,7 @@
 import { keySpace, keyEnter, keyTab } from '@microsoft/fast-web-utilities';
 import type { RichTextEditor } from '..';
-import { waitForUpdatesAsync } from '../../testing/async-helpers';
-import type { ToggleButton } from '../../toggle-button';
+import { waitForUpdatesAsync } from '../../../testing/async-helpers';
+import type { ToggleButton } from '../../../toggle-button';
 import type { ToolbarButton } from './types';
 
 /**

packages/nimble-components/src/rich-text-editor/tests/rich-text-editor-labels.spec.ts → packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-labels.spec.ts

@@ -1,15 +1,15 @@
 import { html } from '@microsoft/fast-element';
 import { richTextEditorTag, type RichTextEditor } from '..';
-import { type Fixture, fixture } from '../../utilities/tests/fixture';
-import { themeProviderTag, type ThemeProvider } from '../../theme-provider';
+import { type Fixture, fixture } from '../../../utilities/tests/fixture';
+import { themeProviderTag, type ThemeProvider } from '../../../theme-provider';
 import {
     LabelProviderRichText,
     labelProviderRichTextTag
-} from '../../label-provider/rich-text';
+} from '../../../label-provider/rich-text';
 import { RichTextEditorPageObject } from '../testing/rich-text-editor.pageobject';
 import { LabelProvider, ToolbarButton } from '../testing/types';
-import { getSpecTypeByNamedList } from '../../utilities/tests/parameterized';
-import { waitForUpdatesAsync } from '../../testing/async-helpers';
+import { getSpecTypeByNamedList } from '../../../utilities/tests/parameterized';
+import { waitForUpdatesAsync } from '../../../testing/async-helpers';
 
 async function setup(): Promise<Fixture<ThemeProvider>> {
     return fixture<ThemeProvider>(

packages/nimble-components/src/rich-text-editor/tests/rich-text-editor-matrix.stories.ts → packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-matrix.stories.ts

@@ -3,25 +3,25 @@ import { html, ViewTemplate } from '@microsoft/fast-element';
 import {
     createMatrixThemeStory,
     createStory
-} from '../../utilities/tests/storybook';
+} from '../../../utilities/tests/storybook';
 import {
     createMatrix,
     sharedMatrixParameters
-} from '../../utilities/tests/matrix';
-import { hiddenWrapper } from '../../utilities/tests/hidden';
+} from '../../../utilities/tests/matrix';
+import { hiddenWrapper } from '../../../utilities/tests/hidden';
 import { richTextEditorTag } from '..';
 import {
     cssPropertyFromTokenName,
     tokenNames
-} from '../../theme-provider/design-token-names';
-import { buttonTag } from '../../button';
-import { loremIpsum } from '../../utilities/tests/lorem-ipsum';
+} from '../../../theme-provider/design-token-names';
+import { buttonTag } from '../../../button';
+import { loremIpsum } from '../../../utilities/tests/lorem-ipsum';
 import {
     DisabledState,
     ErrorState,
     disabledStates,
     errorStates
-} from '../../utilities/tests/states';
+} from '../../../utilities/tests/states';
 
 const metadata: Meta = {
     title: 'Tests/Rich Text Editor',

packages/nimble-components/src/rich-text-editor/tests/rich-text-editor.spec.ts → packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts

@@ -1,13 +1,13 @@
 import { html } from '@microsoft/fast-element';
 import { richTextEditorTag, RichTextEditor } from '..';
-import { type Fixture, fixture } from '../../utilities/tests/fixture';
-import { getSpecTypeByNamedList } from '../../utilities/tests/parameterized';
+import { type Fixture, fixture } from '../../../utilities/tests/fixture';
+import { getSpecTypeByNamedList } from '../../../utilities/tests/parameterized';
 import { RichTextEditorPageObject } from '../testing/rich-text-editor.pageobject';
-import { wackyStrings } from '../../utilities/tests/wacky-strings';
-import type { Button } from '../../button';
-import type { ToggleButton } from '../../toggle-button';
+import { wackyStrings } from '../../../utilities/tests/wacky-strings';
+import type { Button } from '../../../button';
+import type { ToggleButton } from '../../../toggle-button';
 import { ToolbarButton } from '../testing/types';
-import { createEventListener } from '../../utilities/tests/component';
+import { createEventListener } from '../../../utilities/tests/component';
 
 async function setup(): Promise<Fixture<RichTextEditor>> {
     return fixture<RichTextEditor>(

packages/nimble-components/src/rich-text-editor/tests/rich-text-editor.stories.ts → packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.stories.ts

@@ -4,14 +4,14 @@ import { withActions } from '@storybook/addon-actions/decorator';
 import {
     createUserSelectedThemeStory,
     incubatingWarning
-} from '../../utilities/tests/storybook';
+} from '../../../utilities/tests/storybook';
 import { RichTextEditor, richTextEditorTag } from '..';
-import { buttonTag } from '../../button';
+import { buttonTag } from '../../../button';
 import {
     addLabelUseMetadata,
     type LabelUserArgs
-} from '../../label-provider/base/tests/label-user-stories-utils';
-import { labelProviderRichTextTag } from '../../label-provider/rich-text';
+} from '../../../label-provider/base/tests/label-user-stories-utils';
+import { labelProviderRichTextTag } from '../../../label-provider/rich-text';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface RichTextEditorArgs extends LabelUserArgs {

packages/nimble-components/src/rich-text-viewer/styles.ts → packages/nimble-components/src/rich-text/viewer/styles.ts

@@ -5,7 +5,7 @@ import {
     bodyFontColor,
     linkActiveFontColor,
     linkFontColor
-} from '../theme-provider/design-tokens';
+} from '../../theme-provider/design-tokens';
 
 export const styles = css`
     ${display('flex')}

packages/nimble-components/src/rich-text-viewer/tests/rich-text-viewer-matrix.stories.ts → packages/nimble-components/src/rich-text/viewer/tests/rich-text-viewer-matrix.stories.ts

@@ -3,19 +3,19 @@ import { html, ViewTemplate } from '@microsoft/fast-element';
 import {
     createMatrixThemeStory,
     createStory
-} from '../../utilities/tests/storybook';
+} from '../../../utilities/tests/storybook';
 import {
     createMatrix,
     sharedMatrixParameters
-} from '../../utilities/tests/matrix';
-import { hiddenWrapper } from '../../utilities/tests/hidden';
+} from '../../../utilities/tests/matrix';
+import { hiddenWrapper } from '../../../utilities/tests/hidden';
 import { richTextViewerTag } from '..';
-import { richTextMarkdownString } from '../../utilities/tests/rich-text-markdown-string';
-import { loremIpsum } from '../../utilities/tests/lorem-ipsum';
+import { richTextMarkdownString } from '../../../utilities/tests/rich-text-markdown-string';
+import { loremIpsum } from '../../../utilities/tests/lorem-ipsum';
 import {
     cssPropertyFromTokenName,
     tokenNames
-} from '../../theme-provider/design-token-names';
+} from '../../../theme-provider/design-token-names';
 
 const metadata: Meta = {
     title: 'Tests/Rich Text Viewer',

packages/nimble-components/src/rich-text-viewer/tests/rich-text-viewer.spec.ts → packages/nimble-components/src/rich-text/viewer/tests/rich-text-viewer.spec.ts

@@ -1,9 +1,9 @@
 import { html } from '@microsoft/fast-element';
 import { RichTextViewer, richTextViewerTag } from '..';
-import { fixture, type Fixture } from '../../utilities/tests/fixture';
+import { fixture, type Fixture } from '../../../utilities/tests/fixture';
 import { RichTextViewerPageObject } from '../testing/rich-text-viewer.pageobject';
-import { wackyStrings } from '../../utilities/tests/wacky-strings';
-import { getSpecTypeByNamedList } from '../../utilities/tests/parameterized';
+import { wackyStrings } from '../../../utilities/tests/wacky-strings';
+import { getSpecTypeByNamedList } from '../../../utilities/tests/parameterized';
 
 async function setup(): Promise<Fixture<RichTextViewer>> {
     return fixture<RichTextViewer>(

packages/nimble-components/src/rich-text-viewer/tests/rich-text-viewer.stories.ts → packages/nimble-components/src/rich-text/viewer/tests/rich-text-viewer.stories.ts

@@ -3,9 +3,9 @@ import type { Meta, StoryObj } from '@storybook/html';
 import {
     createUserSelectedThemeStory,
     incubatingWarning
-} from '../../utilities/tests/storybook';
+} from '../../../utilities/tests/storybook';
 import { richTextViewerTag } from '..';
-import { richTextMarkdownString } from '../../utilities/tests/rich-text-markdown-string';
+import { richTextMarkdownString } from '../../../utilities/tests/rich-text-markdown-string';
 
 interface RichTextViewerArgs {
     markdown: string;