Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(core): support contenteditable inputs #959

Closed
wants to merge 4 commits into from
Closed

feat(core): support contenteditable inputs #959

wants to merge 4 commits into from

Conversation

aktanoff
Copy link
Contributor

Closes # #958

aktanoff
aktanoff commented Jan 27, 2024
View reviewed changes
projects/demo/src/pages/recipes/contenteditable/contenteditable-doc.component.ts
@@ -0,0 +1,25 @@
import {ChangeDetectionStrategy, Component} from '@angular/core';
Copy link
Contributor Author

@aktanoff aktanoff Jan 27, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i have zero experience in angular, so i just copied TextArea recipe page, and changed <textarea> to <div contenteditable="true">

@aktanoff aktanoff marked this pull request as ready for review January 27, 2024 12:56
@nsbarsukov
Copy link
Member

@aktanoff Hello!

Sorry for late response!
I see you contribution but I will review it later (I need to firstly fix some issues in another project Taiga UI).
I will be back with feedback later.

@aktanoff
Copy link
Contributor Author

aktanoff commented Feb 7, 2024

@nsbarsukov, hi, could you please take a look at this PR?

@nsbarsukov nsbarsukov mentioned this pull request Feb 12, 2024
Merged
@aktanoff aktanoff force-pushed the support-contenteditable-inputs branch from a5b1cde to b7c6dbf Compare February 21, 2024 20:07
@aktanoff
Copy link
Contributor Author

@nsbarsukov, Hello!

Sorry for the long absence, i've fixed all your issues in this iteration. And also added multiline masks support, the easiest way to implement it been using white-space: pre; style, and putting value as string Node into contenteditable element.

I've also seen your draft, and copied some code from there.

@splincode splincode force-pushed the support-contenteditable-inputs branch from 14f4da0 to 0467df4 Compare February 22, 2024 20:12
nsbarsukov
nsbarsukov reviewed Mar 7, 2024
View reviewed changes
projects/core/src/lib/classes/content-editable.ts
Comment on lines +6 to +14
// declared fields
declare addEventListener: HTMLElement['addEventListener'];
declare removeEventListener: HTMLElement['removeEventListener'];

declare dispatchEvent: HTMLElement['dispatchEvent'];
declare isContentEditable: HTMLElement['isContentEditable'];
declare nodeName: HTMLElement['nodeName'];
declare matches: HTMLElement['matches'];
declare ownerDocument: HTMLElement['ownerDocument'];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we improve solution somehow and don't iterate all possible properties ?
Actually, plugins can use ANY possible property of HTMLElement

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately, without fixing this problem we can't merge this solution.
Our users could write their own plugins and use ANY possible properties of HTMLElement.
It will cause breaking change for them(

nsbarsukov
nsbarsukov reviewed Mar 7, 2024
View reviewed changes
projects/core/src/lib/classes/content-editable.ts
}

get maxLength(): number {
return -1;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
return -1;
return Infinity;

nsbarsukov
nsbarsukov reviewed Mar 7, 2024
View reviewed changes
projects/core/src/lib/types/maskito-element.ts
Comment on lines +1 to +16
export interface MaskitoElement
extends Pick<
HTMLInputElement,
| 'addEventListener'
| 'dispatchEvent'
| 'isContentEditable'
| 'matches'
| 'maxLength'
| 'nodeName'
| 'ownerDocument'
| 'removeEventListener'
| 'selectionEnd'
| 'selectionStart'
| 'setSelectionRange'
| 'value'
> {}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

export type TextfieldLike = Pick<
    HTMLInputElement,
    'maxLength' | 'selectionEnd' | 'selectionStart' | 'setSelectionRange' | 'value'
>;
export type MaskitoElement = HTMLElement & TextfieldLike;

projects/demo/src/app/constants/demo-path.ts
@@ -20,6 +20,7 @@ export const DemoPath = {
Card: 'recipes/card',
Phone: 'recipes/phone',
Textarea: 'recipes/textarea',
ContentEditable: 'recipes/contenteditable',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
ContentEditable: 'recipes/contenteditable',
ContentEditable: 'recipes/content-editable',

projects/demo/src/app/app.routes.ts
{
path: DemoPath.ContentEditable,
loadComponent: () =>
import('../pages/recipes/contenteditable/contenteditable-doc.component'),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import('../pages/recipes/contenteditable/contenteditable-doc.component'),
import('../pages/recipes/content-editable/content-editable-doc.component'),

@nsbarsukov
Copy link
Member

Closing this PR in favor of #1039

@nsbarsukov nsbarsukov closed this Apr 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@nsbarsukov nsbarsukov nsbarsukov left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@aktanoff @nsbarsukov