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

Cherry pick insert link dialog (PR #26) #35

Open
wants to merge 8 commits into
base: cnb_supported
Choose a base branch
from
+218 −3
Open

Cherry pick insert link dialog (PR #26) #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7a9ac22
Delete default `editLink` handler
hieutbui Jan 12, 2024
32eb019
Add `onEditLink` callback to listen when press edit link
hieutbui Jan 12, 2024
920875c
Add `updateLink` function
hieutbui Jan 12, 2024
f82c59e
Catch `onEditLink` in HtmlEditor web widget
hieutbui Jan 12, 2024
5243252
Add `onEditLink` callback to example
hieutbui Jan 12, 2024
5e35a83
Correctly detect the Edit button
hieutbui Jan 14, 2024
cc22a25
Change only print in debug
hieutbui Jan 15, 2024
0286c90
Perform call `onChangeContent` after updated link
dab246 Apr 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 150 additions & 0 deletions example/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:html_editor_enhanced/html_editor.dart';
import 'package:file_picker/file_picker.dart';
import 'package:pointer_interceptor/pointer_interceptor.dart';

void main() => runApp(const HtmlEditorExampleApp());

Expand Down Expand Up @@ -162,6 +163,155 @@ class _HtmlEditorExampleState extends State<HtmlEditorExample> {
debugPrint('pasted into editor');
}, onScroll: () {
debugPrint('editor scrolled');
}, onEditLink: (String? urlDisplayText, String? url, bool? isOpenInNewTab, String linkTagId) async {
debugPrint('urlDisplayText: $urlDisplayText, url: $url, isOpenInNewTab: $isOpenInNewTab, linkTagId: $linkTagId');
final textLinkDialogController = TextEditingController(text: urlDisplayText);
final urlLinkDialogController = TextEditingController(text: url);
final textLinkDialogFocusNode = FocusNode();
final urlLinkDialogFocusNode = FocusNode();
final formKeyDialog = GlobalKey<FormState>();
var isOpenNewTabLinkDialog = isOpenInNewTab ?? true;
if (context.mounted) {
await showDialog(
context: context,
builder: (BuildContext context) {
return PointerInterceptor(
child: StatefulBuilder(
builder: (BuildContext contest, StateSetter setState) {
return AlertDialog(
title: const Text('Insert Link'),
scrollable: true,
content: Form(
key: formKeyDialog,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Text to display',
style: TextStyle(
fontWeight: FontWeight.bold
)
),
const SizedBox(height: 10),
TextField(
controller: textLinkDialogController,
focusNode: textLinkDialogFocusNode,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
border: const OutlineInputBorder(),
hintText: urlDisplayText
),
onSubmitted: (_) {
urlLinkDialogFocusNode.requestFocus();
},
),
const SizedBox(height: 20),
const Text(
'URL',
style: TextStyle(
fontWeight: FontWeight.bold
)
),
const SizedBox(height: 10),
TextFormField(
controller: urlLinkDialogController,
focusNode: urlLinkDialogFocusNode,
textInputAction: TextInputAction.done,
decoration: InputDecoration(
border: const OutlineInputBorder(),
hintText: url
),
validator: (String? value) {
if (value == null || value.isEmpty) {
return 'Please enter a URL';
}
return null;
},
),
Row(
children: [
SizedBox(
height: 48.0,
width: 24.0,
child: Checkbox(
value: isOpenNewTabLinkDialog,
activeColor: const Color(0xFF827250),
onChanged: (bool? value) {
setState(() {
isOpenNewTabLinkDialog = value!;
});
},
),
),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Theme.of(context).dialogBackgroundColor,
padding: const EdgeInsets.only(
left: 5.0,
right: 5.0
)
),
onPressed: () {
setState(() {
isOpenNewTabLinkDialog = !isOpenNewTabLinkDialog;
});
},
child: Text(
'Open in new tab',
style: TextStyle(
color: Theme.of(context).textTheme.bodyLarge?.color
)
)
)
],
)
],
)
),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text('Cancel')
),
TextButton(
onPressed: () async {
if (formKeyDialog.currentState!.validate()) {
const htmlToolbarOptions = HtmlToolbarOptions();
var proceed = await htmlToolbarOptions.linkInsertInterceptor?.call(
textLinkDialogController.text.isEmpty
? urlLinkDialogController.text
: textLinkDialogController.text,
urlLinkDialogController.text,
isOpenNewTabLinkDialog
) ?? true;
if (proceed) {
controller.updateLink(
textLinkDialogController.text.isEmpty
? urlLinkDialogController.text
: textLinkDialogController.text,
urlLinkDialogController.text,
isOpenNewTabLinkDialog,
linkTagId
);
}
if (context.mounted) {
Navigator.of(context).pop();
}
}
},
child: const Text('OK')
)
],
);
},
)
);
}
);
}
}),
plugins: [
SummernoteAtMention(
Expand Down
2 changes: 2 additions & 0 deletions example/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ dependencies:

file_picker: ^5.2.5

pointer_interceptor: ^0.9.3+4

dev_dependencies:
flutter_test:
sdk: flutter
Expand Down
2 changes: 1 addition & 1 deletion example/web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
<title>example</title>
<link rel="manifest" href="manifest.json">

<script type="application/javascript" src="/assets/packages/flutter_inappwebview/assets/web/web_support.js" defer></script>
<script type="application/javascript" src="/assets/packages/flutter_inappwebview_web/assets/web/web_support.js" defer></script>
</head>
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
Expand Down
2 changes: 1 addition & 1 deletion lib/assets/summernote-lite-unminified.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion lib/assets/summernote-lite-v2.min.js
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions lib/src/html_editor_controller_unsupported.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,4 +198,7 @@ class HtmlEditorController {

/// Set drag and drop event listener
void setOnDragDropEvent() {}

/// Update the link on editor
void updateLink(String text, String url, bool isNewWindow, String linkTagId) {}
}
11 changes: 11 additions & 0 deletions lib/src/html_editor_controller_web.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -405,4 +405,15 @@ class HtmlEditorController extends unsupported.HtmlEditorController {
void setOnDragDropEvent() {
_evaluateJavascriptWeb(data: {'type': 'toIframe: onDragDropEvent'});
}

@override
void updateLink(String text, String url, bool isNewWindow, String linkTagId) {
_evaluateJavascriptWeb(data: {
'type': 'toIframe: updateLink',
'text': text,
'url': url,
'isNewWindow': isNewWindow,
'linkTagId': linkTagId
});
}
}
44 changes: 44 additions & 0 deletions lib/src/widgets/html_editor_widget_web.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -489,6 +489,16 @@ class _HtmlEditorWidgetWebState extends State<HtmlEditorWidget> {
window.parent.postMessage(JSON.stringify({"view": "$createdViewId", "type": "toDart: onDragLeave"}), "*");
});
}
if (data["type"].includes("updateLink")) {
const linkTagId = data["linkTagId"];
let linkTag = document.getElementById(linkTagId);
linkTag.href = data["url"];
linkTag.target = data["isNewWindow"] ? "_blank" : "_self";
linkTag.innerText = data["text"];

const contentsEditor = document.getElementsByClassName('note-editable')[0].innerHTML;
window.parent.postMessage(JSON.stringify({"view": "$createdViewId", "type": "toDart: onChangeContent", "contents": contentsEditor}), "*");
}
$userScripts
}
}
Expand Down Expand Up @@ -841,6 +851,37 @@ class _HtmlEditorWidgetWebState extends State<HtmlEditorWidget> {
});\n
""";
}
if (c.onEditLink != null) {
callbacks =
"""$callbacks \$('#summernote-2').on('summernote.mouseup', function(_, context) {
\$('.note-link-popover').off('click').on('click', function(e) {
let isNoteIconLink = false;
if (e.target.className === 'note-icon-link') {
isNoteIconLink = true;
} else if (e.target.className === 'note-btn') {
const targetChildrenArray = Array.from(e.target.children);
isNoteIconLink = targetChildrenArray.some(child => child.classList.contains('note-icon-link'));
}
if (isNoteIconLink) {
var linkTag = context.target;
const linkTagId = 'id_' + new Date().getTime();
linkTag.id = linkTagId;
var url = linkTag.href;
var isOpenInNewTab = linkTag.target == '_blank';
var urlDisplayText = linkTag.innerText;
window.parent.postMessage(JSON.stringify({
"view": "$createdViewId",
"type": "toDart: onEditLink",
"url": url,
"urlDisplayText": urlDisplayText,
"isOpenInNewTab": isOpenInNewTab,
"linkTagId": linkTagId
}), "*")
}
});
});\n
""";
}
return callbacks;
}

Expand Down Expand Up @@ -949,6 +990,9 @@ class _HtmlEditorWidgetWebState extends State<HtmlEditorWidget> {
if (data['type'].contains('onDragLeave') && c.onDragLeave != null) {
c.onDragLeave!.call();
}
if (data['type'].contains('onEditLink')) {
c.onEditLink!.call(data['urlDisplayText'], data['url'], data['isOpenInNewTab'], data['linkTagId']);
}
}
});
}
Expand Down
5 changes: 5 additions & 0 deletions lib/utils/callbacks.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ class Callbacks {
this.onTextFontSizeChanged,
this.onDragEnter,
this.onDragLeave,
this.onEditLink,
});

/// Called before certain commands are fired and the editor is in rich text view.
Expand Down Expand Up @@ -194,4 +195,8 @@ class Callbacks {
void Function()? onDragEnter;

void Function()? onDragLeave;

/// Called whenever the edit button of link's popover is clicked.
/// This function passes the text, url, isNewWindow, and the tag's id of the link that will be updated as arguments.
void Function(String?, String?, bool?, String)? onEditLink;
}