@hansevision/tp-richtexteditor-control 1.0.0

package/dist/richTextEditor/RichTextEditor.d.ts

@@ -0,0 +1,41 @@
+import { DisplayMode } from '@microsoft/sp-core-library';
+import { WebPartContext } from '@microsoft/sp-webpart-base';
+import { ErrorService } from '../errorBoundary/errorService';
+export interface IRichTextEditorProps {
+    /** The SPFx WebPartContext from the host web part. Required for file picker access. */
+    spfxContext: WebPartContext;
+    /** Current DisplayMode from @microsoft/sp-core-library. */
+    displayMode: DisplayMode;
+    /** HTML content to display / edit. */
+    value?: string;
+    /** Called whenever the HTML content changes. */
+    onChange?: (textContent: string) => void;
+    /**
+     * Optional ErrorService instance. If omitted, a default instance is created.
+     * Register your own error handlers via errorService.register(...).
+     */
+    errorService?: ErrorService;
+}
+/**
+ * Self-contained Rich Text Editor component.
+ *
+ * Wraps SyncFusion EJ2 RichTextEditor with SharePoint file pickers for images
+ * and videos. Provides its own SyncFusion provider and RTE context — simply
+ * drop it into your web part render output.
+ *
+ * @example
+ * ```tsx
+ * import { RichTextEditor, ErrorService } from '@hansevision/tp-richtexteditor-control';
+ *
+ * const errorService = new ErrorService();
+ *
+ * <RichTextEditor
+ *   spfxContext={this.context}
+ *   displayMode={this.displayMode}
+ *   value={this.properties.textContent}
+ *   onChange={(html) => { this.properties.textContent = html; }}
+ *   errorService={errorService}
+ * />
+ * ```
+ */
+export declare function RichTextEditor({ spfxContext, displayMode, value, onChange, errorService }: IRichTextEditorProps): JSX.Element;

package/dist/richTextEditor/RichTextEditorContext.d.ts

@@ -0,0 +1,21 @@
+import { WebPartContext } from '@microsoft/sp-webpart-base';
+import { ErrorService } from '../errorBoundary/errorService';
+import { DisplayMode } from '@microsoft/sp-core-library';
+/**
+ * Props / context shape exposed by the RichTextEditor NPM package.
+ * Mirrors the IRichTextEditorContext that previously lived in RichTextEditorApp.tsx
+ * inside the SPFx web part project.
+ */
+export interface IRichTextEditorContext {
+    spfxContext: WebPartContext;
+    displayMode: DisplayMode;
+    errorService: ErrorService;
+    /** Current HTML content of the editor. */
+    value?: string;
+    onChange?: (textContent: string) => void;
+}
+/**
+ * React context consumed by all sub-components of RichTextEditor.
+ * Populated by the <RichTextEditor> component itself.
+ */
+export declare const RichTextEditorContext: import("react").Context<IRichTextEditorContext>;

package/dist/richTextEditor/components/controls/CustomTool.d.ts

@@ -0,0 +1,9 @@
+import { IToolbarItems } from '@syncfusion/ej2-react-richtexteditor';
+interface IProps {
+    onClick: () => void;
+    icon: string;
+    toolTipText: string;
+    id?: string;
+}
+export declare const CustomToolbarItem: ({ icon, onClick, toolTipText, id }: IProps) => IToolbarItems;
+export {};

package/dist/richTextEditor/components/controls/ImagePickerControl.d.ts

@@ -0,0 +1,3 @@
+export default function ImagePickerControl({ onClose }: {
+    onClose: () => void;
+}): JSX.Element;

package/dist/richTextEditor/components/controls/VideoPickerControl/ContainsValueChangedObserver.d.ts

@@ -0,0 +1 @@
+export declare function ContainsValueChangedObserver(rteContentContainer: HTMLElement, onContainsValueChanged?: (containsValue: boolean) => void): MutationObserver;

package/dist/richTextEditor/components/controls/VideoPickerControl/VideoPickerControl.d.ts

@@ -0,0 +1,4 @@
+export declare const VideoPickerControl: ({ onClose }: {
+    onClose: () => void;
+}) => JSX.Element;
+export default VideoPickerControl;

package/dist/richTextEditor/components/controls/handleUpload.d.ts

@@ -0,0 +1,3 @@
+import { WebPartContext } from '@microsoft/sp-webpart-base';
+import { IFilePickerResult } from '../filePicker';
+export declare const handleFileUpload: (spfxContext: WebPartContext, file: IFilePickerResult) => Promise<string>;

package/dist/richTextEditor/components/dialogs/progressDialog.d.ts

@@ -0,0 +1,4 @@
+export declare const showProgressDialog: (title: string, message: string) => {
+    close: () => void;
+    updateProgress: (newProgress: number) => void;
+};

package/dist/richTextEditor/components/filePicker/common/Constants.d.ts

@@ -0,0 +1,39 @@
+import { ICultureInfo } from './SPEntities';
+/**
+ * Key that is used to store loaded fields in sessionStorage
+ */
+export declare const LoadedViewFieldsKey = "LBLoadedViewFields";
+/**
+ * Mapping between current field name and the name of the real field that contains the data
+ */
+export declare const FieldNamesMapping: {
+    Title: {
+        storedName: string;
+    };
+    LinkTitle: {
+        storedName: string;
+    };
+    LinkTitleNoMenu: {
+        storedName: string;
+    };
+    LinkFilename: {
+        storedName: string;
+    };
+    LinkFileNameNoMenu: {
+        storedName: string;
+    };
+    FileLeafRef: {
+        storedName: string;
+    };
+    URL: {
+        storedName: string;
+    };
+    URLwMenu: {
+        storedName: string;
+    };
+};
+/**
+ * Invariant Culture
+ */
+export declare const InvariantCulture: ICultureInfo;
+export declare const EmptyGuid = "00000000-0000-0000-0000-000000000000";

package/dist/richTextEditor/components/filePicker/common/SPEntities.d.ts

@@ -0,0 +1,178 @@
+/**
+ * Represents SP  ContentType Id
+ */
+export interface ISPContentTypeId {
+    StringValue: string;
+}
+/**
+ * Represents SP List ContentType
+ */
+export interface ISPListContentType {
+    Id: ISPContentTypeId;
+}
+/**
+ * Represents SP List
+ */
+export interface ISPList {
+    Id: string;
+    Title: string;
+    BaseTemplate: string;
+    ContentTypes?: ISPListContentType[];
+}
+/**
+ * Replica of the returned value from the REST api
+ */
+export interface ISPLists {
+    value: ISPList[];
+}
+/**
+ * Represents SP Field
+ */
+export interface ISPField {
+    Id: string;
+    Format?: string;
+    RichText?: boolean;
+    SchemaXml?: string;
+    LookupDisplayUrl?: string;
+    TypeAsString?: string;
+    ResultType?: string;
+}
+/**
+ * Represents value of Lookup Field (single lookup)
+ */
+export interface ISPFieldLookupValue {
+    lookupId: string;
+    lookupValue: string;
+}
+/**
+ * Represents Term from Taxonomy Field value
+ */
+export interface ITerm {
+    Label: string;
+    TermID: string;
+}
+/**
+ * Represents a principal value as it is stored in People and Groups field
+ */
+export interface IPrincipal {
+    id: string;
+    email: string;
+    department: string;
+    jobTitle: string;
+    sip: string;
+    title: string;
+    value: string;
+    picture: string;
+}
+/**
+ * Custom interface to store user profile properties
+ */
+export interface IUserProfileProperties {
+    displayName?: string;
+    jobTitle?: string;
+    email?: string;
+    workPhone?: string;
+    cellPhone?: string;
+    department?: string;
+    pictureUrl?: string;
+    sip?: string;
+    userUrl?: string;
+}
+/**
+ * KeyValuePair returned by SP REST API
+ */
+export interface IODataKeyValuePair {
+    Key: string;
+    Value: string;
+    ValueType: string;
+}
+/**
+ * Replica of Microsoft's Calendar definition for CultureInfo object
+ */
+export interface ICultureCalendar {
+    AlgorithmType: number;
+    CalendarType: number;
+    Eras: number[];
+    IsReadOnly: boolean;
+    MaxSupportedDateTime: string;
+    MinSupportedDateTime: string;
+    TwoDigitYearMax: number;
+}
+/**
+ * Replica of Microsoft's DateTimeFormat definition for CultureInfo object
+ */
+export interface ICultureDateTimeFormat {
+    AMDesignator: string;
+    AbbreviatedDayNames: string[];
+    AbbreviatedMonthGenitiveNames: string[];
+    AbbreviatedMonthNames: string[];
+    Calendar: ICultureCalendar;
+    CalendarWeekRule: number;
+    DateSeparator: string;
+    DayNames: string[];
+    FirstDayOfWeek: number;
+    FullDateTimePattern: string;
+    IsReadOnly: boolean;
+    LongDatePattern: string;
+    LongTimePattern: string;
+    MonthDayPattern: string;
+    MonthGenitiveNames: string[];
+    MonthNames: string[];
+    NativeCalendarName: string;
+    PMDesignator: string;
+    RFC1123Pattern: string;
+    ShortDatePattern: string;
+    ShortTimePattern: string;
+    ShortestDayNames: string[];
+    SortableDateTimePattern: string;
+    TimeSeparator: string;
+    UniversalSortableDateTimePattern: string;
+    YearMonthPattern: string;
+    eras: any[];
+}
+/**
+ * Replica of Microsoft's NumberFormat definition for CultureInfo object
+ */
+export interface ICultureNumberFormat {
+    CurrencyDecimalDigits: number;
+    CurrencyDecimalSeparator: string;
+    CurrencyGroupSeparator: string;
+    CurrencyGroupSizes: number[];
+    CurrencyNegativePattern: number;
+    CurrencyPositivePattern: number;
+    CurrencySymbol: string;
+    DigitSubstitution: number;
+    IsReadOnly: boolean;
+    NaNSymbol: string;
+    NativeDigits: string[];
+    NegativeInfinitySymbol: string;
+    NegativeSign: string;
+    NumberDecimalDigits: number;
+    NumberDecimalSeparator: string;
+    NumberGroupSeparator: string;
+    NumberGroupSizes: number[];
+    NumberNegativePattern: number;
+    PerMilleSymbol: string;
+    PercentDecimalDigits: number;
+    PercentDecimalSeparator: string;
+    PercentGroupSeparator: string;
+    PercentGroupSizes: number[];
+    PercentNegativePattern: number;
+    PercentPositivePattern: number;
+    PercentSymbol: string;
+    PositiveInfinitySymbol: string;
+    PositiveSign: string;
+}
+/**
+ * Replica of Microsoft's CultureInfo definition
+ */
+export interface ICultureInfo {
+    name: string;
+    dateTimeFormat: ICultureDateTimeFormat;
+    numberFormat: ICultureNumberFormat;
+}
+export interface IUploadImageResult {
+    Name: string;
+    ServerRelativeUrl: string;
+    UniqueId: string;
+}

package/dist/richTextEditor/components/filePicker/common/interfaces.d.ts

@@ -0,0 +1,26 @@
+import { SPHttpClient } from '@microsoft/sp-http';
+import { ListViewAccessor } from '@microsoft/sp-listview-extensibility';
+import { PageContext, SPField } from '@microsoft/sp-page-context';
+import { ISPField } from './SPEntities';
+/**
+ * Customizer context interface.
+ * Can be used in different types of customizers
+ */
+export interface IContext {
+    spHttpClient: SPHttpClient;
+    pageContext: PageContext;
+    listView?: ListViewAccessor | null;
+    field?: SPField | null;
+}
+/**
+ * Interface that represents dictionary of fields
+ */
+export interface IFields {
+    [id: string]: ISPField;
+}
+/**
+ * Parent of all props interfaces that needs context
+ */
+export interface IProps {
+    context: IContext;
+}

package/dist/richTextEditor/components/filePicker/components/dragDropFiles/DragDropFiles.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { IDragDropFilesProps, IDragDropFilesState } from './IDragDropFiles';
+/**
+ * DragDropFiles Class Control
+ */
+export declare class DragDropFiles extends React.Component<IDragDropFilesProps, IDragDropFilesState> {
+    private dragCounter;
+    private dropRef;
+    private _LabelMessage;
+    private _IconName;
+    private _dropEffect;
+    private _enable;
+    constructor(props: IDragDropFilesProps);
+    /**
+     * Lifecycle hook when component is mounted
+     */
+    componentDidMount(): void;
+    /**
+     * Stop listeners from onDragOver event.
+     * @param e
+     */
+    private handleonDragOver;
+    /**
+     * Stop listeners from onDragEnter event, enable drag and drop view.
+     * @param e
+     */
+    private handleonDragEnter;
+    /**
+     * Stop listeners from ondragenter event, disable drag and drop view.
+     * @param e
+     */
+    private handleonDragLeave;
+    /**
+     * Stop listeners from onDrop event and load files to property onDrop.
+     * @param e
+     */
+    private handleonDrop;
+    /**
+     * Add File to Array Files of type File[]
+     * https://www.meziantou.net/upload-files-and-directories-using-an-input-drag-and-drop-or-copy-and-paste-with.htm
+     * @param dataTransfer
+     */
+    private getFilesAsync;
+    /**
+     *
+     * @param entry
+     */
+    private readEntryContentAsync;
+    /**
+     * Default React component render method
+     */
+    render(): React.ReactElement<IDragDropFilesProps>;
+}

package/dist/richTextEditor/components/filePicker/components/dragDropFiles/IDragDropFiles.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+export interface IDragDropFilesProps {
+    /**
+     * Specifies the dropEffect, default is 'none'
+     * https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect
+     */
+    dropEffect?: string;
+    /**
+     * Specifies the label of the file picker button
+     */
+    labelMessage?: string;
+    /**
+     * Specifies the icon to display
+     */
+    iconName?: string;
+    /**
+     * Handler to return the files from drag and drop.
+     **/
+    onDrop?: any;
+    /**
+     * Specify if drag and drop option is enable.
+     **/
+    enable?: boolean;
+    children?: ReactNode;
+}
+export interface IDragDropFilesState {
+    dragStatus?: boolean;
+}

package/dist/richTextEditor/components/filePicker/components/dragDropFiles/index.d.ts

@@ -0,0 +1,2 @@
+export * from './IDragDropFiles';
+export * from './DragDropFiles';

package/dist/richTextEditor/components/filePicker/components/fields/fieldAttachmentsRenderer/FieldAttachmentsRenderer.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps';
+/**
+ * Attachments renderer props
+ */
+export interface IFieldAttachmentsRendererProps extends IFieldRendererProps {
+    /**
+     * amount of attachments
+     */
+    count?: number;
+}
+/**
+ * For future
+ */
+export interface IFieldAttahcmentsRendererState {
+}
+/**
+ * Attachments Renderer.
+ * Used for:
+ *   - Attachments
+ */
+export declare class FieldAttachmentsRenderer extends React.Component<IFieldAttachmentsRendererProps, IFieldAttahcmentsRendererState> {
+    constructor(props: IFieldAttachmentsRendererProps, state: IFieldAttahcmentsRendererState);
+    render(): JSX.Element;
+}

package/dist/richTextEditor/components/filePicker/components/fields/fieldAttachmentsRenderer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FieldAttachmentsRenderer.module.scss';
+export * from './FieldAttachmentsRenderer';

package/dist/richTextEditor/components/filePicker/components/fields/fieldBaseTextRenderer/FieldBaseTextRenderer.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps';
+export interface IFieldBaseTextRendererProps extends IFieldRendererProps {
+    /**
+     * text to be displayed
+     */
+    text?: string;
+    /**
+     * true if no need to render span element with text content
+     */
+    noTextRender?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * For future
+ */
+export interface IFieldBaseTextRendererState {
+}
+/**
+ * Base renderer. Used to render text.
+ */
+export declare class FieldBaseTextRenderer extends React.Component<IFieldBaseTextRendererProps, IFieldBaseTextRendererState> {
+    constructor(props: IFieldBaseTextRendererProps, state: IFieldBaseTextRendererState);
+    render(): JSX.Element;
+}

package/dist/richTextEditor/components/filePicker/components/fields/fieldBaseTextRenderer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FieldBaseTextRenderer.module.scss';
+export * from './FieldBaseTextRenderer';

package/dist/richTextEditor/components/filePicker/components/fields/fieldCommon/IFieldRendererProps.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ICssInput } from '@fluentui/react/lib/Utilities';
+/**
+ * base properties for field renderes
+ */
+export interface IFieldRendererProps {
+    /**
+     * CSS styles to apply to the renderer
+     */
+    cssProps?: React.CSSProperties;
+    /**
+     * CSS classes to apply to the renderer
+     */
+    className?: ICssInput;
+}

package/dist/richTextEditor/components/filePicker/components/fields/fieldCommon/index.d.ts

@@ -0,0 +1 @@
+export * from './IFieldRendererProps';

package/dist/richTextEditor/components/filePicker/components/fields/fieldDateRenderer/FieldDateRenderer.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps';
+export interface IFieldDateRendererProps extends IFieldRendererProps {
+    /**
+     * text to be rendered
+     */
+    text?: string;
+}
+/**
+ * For future
+ */
+export interface IFieldDateRendererState {
+}
+/**
+ * Field Date Renderer.
+ * Used for:
+ *   - Date Time
+ */
+export declare class FieldDateRenderer extends React.Component<IFieldDateRendererProps, IFieldDateRendererState> {
+    constructor(props: IFieldDateRendererProps, state: IFieldDateRendererState);
+    render(): JSX.Element;
+}

package/dist/richTextEditor/components/filePicker/components/fields/fieldDateRenderer/index.d.ts

@@ -0,0 +1 @@
+export * from './FieldDateRenderer';

package/dist/richTextEditor/components/filePicker/components/fields/fieldFileTypeRenderer/FieldFileTypeRenderer.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps';
+export interface IFieldFileTypeRendererProps extends IFieldRendererProps {
+    /**
+     * file/document path
+     */
+    path: string;
+    /**
+     * true if the icon should be rendered for a folder, not file
+     */
+    isFolder?: boolean;
+}
+/**
+ * For future
+ */
+export interface IFieldFileTypeRendererState {
+}
+/**
+ * File Type Renderer.
+ * Used for:
+ *   - File/Document Type
+ */
+export declare class FieldFileTypeRenderer extends React.Component<IFieldFileTypeRendererProps, IFieldFileTypeRendererState> {
+    constructor(props: IFieldFileTypeRendererProps, state: IFieldFileTypeRendererState);
+    render(): JSX.Element;
+}

package/dist/richTextEditor/components/filePicker/components/fields/fieldFileTypeRenderer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FieldFileTypeRenderer.module.scss';
+export * from './FieldFileTypeRenderer';

package/dist/richTextEditor/components/filePicker/components/fields/fieldLookupRenderer/FieldLookupRenderer.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { IContext } from '../../../common/interfaces';
+import { ISPFieldLookupValue } from '../../../common/SPEntities';
+import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps';
+/**
+ * Field Lookup Renderer Props
+ * There are 3 options to provide the props:
+ * - [recommended, used in FieldRendererHelper] Provide fieldId and context. In that case request for DispUrl will be sent only if a user clicks on the value
+ * - Provide dispFormUrl: if you know this URL a priori you can provide it into the renderer
+ * - Provide onClick handler to handle value's click event outside the renderer
+ */
+export interface IFieldLookupRendererProps extends IFieldRendererProps {
+    /**
+     * lookup values
+     */
+    lookups: ISPFieldLookupValue[];
+    /**
+     * url of Display form for the list that is referenced in the lookup
+     */
+    dispFormUrl?: string;
+    /**
+     * custom event handler of lookup item click. If not set the dialog with Display Form will be shown
+     */
+    onClick?: (args: IFieldLookupClickEventArgs) => void;
+    /**
+     * Field's id.
+     */
+    fieldId?: string;
+    /**
+     * Customizer context. Must be providede if fieldId is set
+     */
+    context?: IContext;
+}
+/**
+ * Field Lookup Renderer State
+ */
+export interface IFieldLookupRendererState {
+    hideDialog?: boolean;
+    lookupDispFormUrl?: string;
+    dispFormUrl?: string;
+}
+/**
+ * Lookup click event arguments
+ */
+export interface IFieldLookupClickEventArgs {
+    lookup?: ISPFieldLookupValue;
+}
+/**
+ * Field Lookup Renderer.
+ * Used for:
+ *   - Lookup, LookupMulti
+ */
+export declare class FieldLookupRenderer extends React.Component<IFieldLookupRendererProps, IFieldLookupRendererState> {
+    constructor(props: IFieldLookupRendererProps, state: IFieldLookupRendererState);
+    render(): JSX.Element;
+    private _onClick;
+    private _onIframeLoaded;
+    private _onDialogDismiss;
+}

package/dist/richTextEditor/components/filePicker/components/fields/fieldLookupRenderer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FieldLookupRenderer.module.scss';
+export * from './FieldLookupRenderer';